4

我以前这样做过，所以我知道这是可能的，但现在它行不通了，而且我的大脑很乱！所以希望，在我将附近的所有 IE 粉碎到一百万位之前，有人可以帮助我解决这个问题。

我想做的是重新创建类似Ornamento网站的东西。当用户在上面滚动时，图片会相互重叠。它们是在单独的 div 中使用分层的固定背景图像完成的。效果如下所示：

这是未滚动的网站：

装饰展开

这是滚动的网站

装饰滚动

如您所见，背景图像保持在同一位置，但逐渐被不同 div 中的另一个背景图像覆盖或“接管”。这适用于 Chrome、Firefox、Opera、IE10、IE9、Safari 和 IE8（可能还有其他）。它是通过 CSS3 背景封面和固定的背景定位来完成的。

所以，我试图在我的测试版网站Striking Foto上复制它。除了旧版 IE（8 及以下）之外，我让它在所有方面都可以工作。我正在使用 IE 过滤器来获取完整的背景图像，它看起来不错。

我使用了以下代码（其中有 5 个包含内容的 div，每个都标记为 home、about、gallery、pricing 和 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 无法正确滚动

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

IE8 无法正确缩放

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

我的 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，但您也可以在线查看。

非常感谢！

4

1 回答 1

1

我意识到，装饰品网站上的图像不是全宽的。将浏览器拉得尽可能宽，你会看到 ;-)

最好的选择是使用带有 ie 条件的http://srobbin.com/jquery-plugins/backstretch/并且图像不会在 ie 中滚动

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

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

于 2013-03-08T22:51:15.467 回答