很多時候我們給網站了一個大banner,但是隨着屏幕的變化，背景會變形，我們知道background-size可以實現背景圖等比例縮放，但是，我們想讓下面的盒子根據縮放后背景圖的高度，也能自動向上擠。這用css竟然也是可以實現的，瞬間感覺自己的css弱爆了，下面是我寫的小demo,我想在響應式的網站上，這個用途還是很廣的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap { position: relative; } .banner { width:100%; height:auto; background-image: url(banner.jpg); background-size: 100% auto; background-repeat: no-repeat; position: relative; } .banner::after { content: ""; display: block; /*圖片的寬高比計算得出*/ padding-top: 45%; } .box { background-color: green; /*居中盒子*/ position: absolute; top:100px; left:0; right: 0; margin:0 auto; width:50%; height:100px; } .main { width:100%; height:100px; background-color: yellow; } </style> </head> <body> <div class="wrap"> <div class="banner"> <div class="box"></div> </div> <div class="main"></div> </div> </body> </html>
效果圖：
綠色盒子始終占據整個背景圖的50%，且居中，下面的盒子始終緊跟着背景圖高度變化。無論屏幕如何縮放，都能保證全體等比縮放