Question

我之前做过这个，所以我知道这是可能的，但现在它不会起作用而且它会弄乱我的大脑！所以希望，在我将邻居中的所有IE粉碎到一百万位之前，有人可以帮我解决这个问题。

我要做的是重新创建类似Ornamento网站的内容。当用户在其上滚动时，图片彼此重叠。它们是在分开的div中使用分层固定背景图像完成的。效果如下：

这是未展开的网站：

Ornamento Unscrolled

这是滚动的网站

Ornamento Scrolled

正如您所看到的，背景图像停留在同一个地方，但是被另一个div中的另一个背景图像逐渐叠加或“接管”。这适用于Chrome，Firefox，Opera，IE10，IE9，Safari和IE8（可能还有其他）。它使用CSS3背景封面和固定的背景定位。

因此，我尝试在我的测试版网站Striking Foto上复制此内容。除了传统的IE（8和更低版本）之外，我还可以使用它。我使用IE过滤器获得完整的背景图像，看起来很不错。

我使用了以下代码（其中有5个包含内容的div，每个都标记为home，about，gallery，pricing，and contact：

#home, #about, #gallery, #pricing, #contact { 
position: relative; 
display: block; 
height: 100%; 
width: 100%; 
background: url(../assets/style_images/home_background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
border-bottom: 5px solid #000;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='assets/style_images/home_background.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/home_background.jpg', sizingMethod='scale')";}

#about { background-image: url(../assets/style_images/about_background.jpg);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/about_background.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/about_background.jpg', sizingMethod='scale')";}

#gallery { background-image: url(../assets/style_images/gallery_background.jpg); 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/gallery_background.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/gallery_background.jpg', sizingMethod='scale')";}

#pricing { background-image: url(../assets/style_images/pricing_background.jpg); 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/pricing_background.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/pricing_background.jpg', sizingMethod='scale')";}

#contact { 
background-image: url(../assets/style_images/contact_background.jpg); 
border: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/contact_background.jpg', sizingMethod='scale'); 
 -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/contact_background.jpg', sizingMethod='scale')"; }

（注意：我相信这个IE过滤器仅在使用索引文件中的链接引用图像时才有效，而不是CSS文件。我可能错了，但这就是链接不同的原因。）

我认为这会起作用，但事实并非如此。当我在IE中滚动时，我看到了这种情况：

IE8 Not Scrolling Correctly

背景图像是滚动的，而不是固定的背景定位。所以我认为它是IE过滤器，因为他们喜欢分叉一切。所以我删除了它们并再次尝试。这次我得到了以下图片：

IE8 Not Scaling Correctly

现在图像向右滚动，但背景图像不是全屏。

我的HTML看起来像这样（经过编辑，使其更小，更易读）。

 <!DOCTYPE HTML>
 <html>
 <head>
 <title>Striking Foto</title>
 <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 </head>

 <body>
 <header></header>

 <div id="home">
    <!--nothing except images-->
 </div>
 <div id="about">
    <div class="wrap">
        <article>
        <!--nothing except content-->
        </article>
    </div>
</div>
<div id="gallery">
    <div class="wrap">
        <article>
        <!--content-->
        </article>
    </div>
</div>   
<div id="pricing">
    <div class="wrap">
        <article>
        <!--content-->
        </article>
    </div>
</div>   
<div id="contact">
    <div class="wrap">
        <article>
            <!--content-->
        </article>
    </div>
</div>  
</body>
</html>

所以，我被困住了。不知怎的Ornamento在IE中做到了，我以前做过，但我不知道怎么做，我真的可以使用一些帮助。如果您愿意，我可以提供所有CSS，但您也可以在线查看。

非常感谢你！

Answer 1

我意识到，ornamento.com上的图像并不是全宽的。尽可能扩展您的浏览器，你会看到; - ）

最好的选择是http://srobbin.com/jquery-plugins/backstretch/使用ie条件，图像不滚动，即

或使图像足够大以至于看不到边缘，即在其他尺寸为“覆盖”的浏览器中它们仍然可以看起来不错

希望这可以帮助其他人找到这个！我花了好几个小时

如何使用滚动背景图像创建全屏固定

1 个答案: