Css 如何创建全屏固定滚动背景图像_Css_Internet Explorer 8_Fullscreen_Css Position

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

css internet-explorer-8

Css 如何创建全屏固定滚动背景图像,css,internet-explorer-8,fullscreen,css-position,Css,Internet Explorer 8,Fullscreen,Css Position,我以前做过这个，所以我知道这是可能的，但现在它不起作用了，它扰乱了我的大脑！所以，希望在我把附近所有的IE都粉碎成百万比特之前，有人能帮我解决这个问题我想做的是重新创建类似网站的东西。当用户在其上滚动时，图片相互重叠。它们是用分层固定背景图像在单独的div中完成的。效果如下所示：这是未浏览的网站：这是滚动的网站正如您所见，背景图像保持在同一位置，但逐渐被另一个分区中的另一个背景图像覆盖或“接管”。这适用于Chrome、Firefox、Opera、IE10、IE9、Safari和IE8

我以前做过这个，所以我知道这是可能的，但现在它不起作用了，它扰乱了我的大脑！所以，希望在我把附近所有的IE都粉碎成百万比特之前，有人能帮我解决这个问题

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

这是未浏览的网站：

这是滚动的网站

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

所以，我试图在我的测试版网站上复制这个。我让它在除遗留IE（8及以下）以外的所有领域都能工作。我用IE滤镜拍摄了一幅完整的背景图像，效果不错

我使用了以下代码（共有5个div，其中包含内容，每个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中滚动时，我看到了这种情况：

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

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

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


打击Foto

所以，我被卡住了。不知何故，佩里诺是在IE中做的，我以前也做过，但我不知道如何做，我真的需要一些帮助。如果你愿意，我可以提供所有CSS，但你也可以在线查看

非常感谢您！

我意识到，装饰网站上的图像不是全宽的。请尽可能地扩展您的浏览器，您会看到；-）

最好的选择是与ie一起使用，并且图像不会在ie中滚动

或者使图像足够大，使边缘在ie中看不到，它们在其他大小为“cover”的浏览器中看起来仍然正常

希望这能帮助其他找到它的人！我花了好几个小时

 <!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>