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，那一个获取背景图像而另一个不获取。其他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;
 }

说明：If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

CSS：背景图像仅显示在页面上第一个出现的div上

1 个答案: