您的位置：首页 > Web前端 > CSS

css背景图等比例缩放，盒子随背景图等比例缩放

2017-04-20 12:57 435 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航