很多时候我们给网站了一个大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%，且居中，下面的盒子始终紧跟着背景图高度变化。无论屏幕如何缩放，都能保证全体等比缩放