Question

我的HTML页面中有两个div。我正在使用background-attachement:fixed的第二个div的背景图像。但是图像的某些部分隐藏在第一个div之后。我的第一个div高度为50px，图片的50px隐藏在其后面。我不知道为什么会这样。 fidded

// HTML

<div style="height:50px; background:#d7d7d7">aa</div>
<div class="image"></div>

// CSS

.image{ width:970px; background:url('http://www.lavu.com/wp-content/uploads/2015/01/banner_1300x226_10.jpg') left top no-repeat; height:400px; background-attachment:fixed}

Answer 1

如果第一个div的高度保持不变，则可以将其高度指定为background-position到50px的垂直值。如果高度会有所不同，我相信你必须依赖JS。

.image {
    background: url("http://www.lavu.com/wp-content/uploads/2015/01/banner_1300x226_10.jpg") no-repeat fixed left 50px transparent
}

当您使用fixed时，图像相对于视口定位并忽略任何周围元素的存在，类似于使用position: fixed;时元素的行为

Answer 2

只需删除以下背景附件：从类“.image”

修复

这样给它：

.image {
width: 970px;
background: url('http://www.lavu.com/wp-content/uploads/2015/01/banner_1300x226_10.jpg') left top no-repeat;
height: 400px;
}

CSS background-attachment：修复隐藏图像

2 个答案: