我将视差效果与 background-size: cover;
一起使用。当屏幕分辨率为 +1090px 时没有问题,但如果它更小,背景图像开始隐藏在底部 div 下。
这是我的 bg img 的 css 代码。
#bg6 {
background: url(../../../images/para/6.jpg) center bottom no-repeat fixed;
height:400px;
width:100%;
position:relative;
z-index:-1;
margin:0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
我正在寻找一种方法来限制 background-size: cover;
在达到总宽度 1090 后停止缩放。
UPD1 - http://jsfiddle.net/G7F7L/2/ fiddle 链接
UPD2 - 我自己找到的解决方案中的 1 个。
@media only all and (max-width: 1298px){
#bg6 {
background: url(../../../images/para/6.jpg) center bottom no-repeat fixed;
height:400px;
width:100%;
position:relative;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size:auto;
background-size: 1298px auto;
z-index:-1;
margin:0;
padding: 0;
}
}
它有点乱,但它可以完成工作。低于 1298px 后,背景停止拉伸(stretch)。
最佳答案
这是您要找的吗?
background-size:100% auto;
我做过一些视差相关的工作,但遇到了同样的问题。视差拉伸(stretch)背景的一个问题是,随着图像变小,您必须使用媒体查询调整 div,否则会弄乱图像大小与 div 的比率。
关于html - 背景 :cover covered by div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21306071/