html - CSS:背景图片仅显示在页面上第一个出现的 div 上

Question

我遇到了一个让我难过的问题。我把它简化到这个。相关的(唯一的)CSS 样式是:

    #segment1,
    #segment2 {
         width: 16.6667%;
         height: 100%;
         float: left;
         background-image: url(../XYZ-TEST/1alt.gif); 
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-position: top left;
     }

相关的测试 HTML 是:

    <div id="segment1">Segment one</div>
    <div id="segment2">Segment two</div>

所以你认为你会得到两个并排的相同 div，具有相同的背景图像 - 除了在渲染时，背景图像仅出现在第一个出现的 .问题似乎出在渲染上，而不是代码上。如果我将 segment2 的 HTML 放在第一位，则该 HTML 会获得背景图像，而另一个则不会。其他 CSS 似乎很好，只是背景图像失败了。背景图片的路径没问题。

它看起来像是 CSS 中定义多个背景图像的问题，但我找不到像网络上提到的任何其他问题。在 Chrome 和 FF 中测试。我已经排除了一个杂散的分号或类似的，因为两者是同时定义的。你能看到我错过的任何东西吗？

Answer 1

从 css 中删除 background-attachment:fixed。它应该可以解决您的问题。

演示:http://jsfiddle.net/lotusgodkk/GCu2D/256/

#segment1, #segment2 {
     width: 16.6667%;
     height: 100%;
     float: left;
     background-image: url(http://www-mtl.mit.edu/img/bg_01.gif);
     background-repeat: no-repeat;     
     background-position: top left;
 }

说明:如果指定了 background-image，则 background-attachment CSS 属性确定该图像的位置是固定在视口(viewport)内，还是与其包含 block 一起滚动。

引用:https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment