Question

使用视差效果和background-size: cover;。当屏幕res为+ 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 LINK

UPD2 - 我发现自己的解决方案之一。

@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之后，背景停止拉伸。

Answer 1

这是你在找什么？

http://jsfiddle.net/JyeA9/1/

background-size:100% auto;

我做了一些视差事，并遇到了同样的问题。视差拉伸背景的一个问题是图像越小，您必须使用媒体查询调整div，否则会影响图像大小与div的比率。

背景：div涵盖的封面

1 个答案: