Question

好的，所以我有一个使用background-size：cover的背景图片。现在我知道IE不喜欢它。所以我试图在这个页面上实现它讨论的一些方法：http://css-tricks.com/perfect-full-page-background-image/使用IE的CSS文件。我希望我的背景大小：封面保持相同的所有浏览器，但IE和IE浏览器IE浏览器，所以它具有相同的外观和感觉。我尝试的解决方案无效。请帮忙。我的投资组合页面网址为：http://spenry.mydevryportfolio.com/portfolio/

标题/背景图片HTML（我在这里添加了Div和IMG以启用我的CSS IE，但在我的常规样式表中的其他浏览器中隐藏了这个div的内容，因为在其他浏览器中我的图像显示通过下面的CSS作为背景大小的封面）

<article class="fullheight">
<div id="bg">
<img src="builds/images/gallery/web_photo.jpg" alt="Girl shooting an arrow with her bow">
</div>
<div class="hgroup">
<h1>Bowpen Designs</h1>
<h2>Aim Your Sites</h2>
<p><a href="#about"><img src="builds/images/misc/arrow.png" alt="down arrow"></a></p>
</div> <!-- hgroup div -->
</article> <!-- fullheight -->

CSS：

header .fullheight {
background:url(../images/gallery/web_photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}

#bg {
display: none;
}

header .fullheight .hgroup {
padding: 100px 0;
}

header .fullheight .hgroup h1 {
color: #FFFFFF;
font-size: 5em;
font-weight: 900;
line-height: 1.15em;
text-shadow: #000000 0 0 20px;
text-align: center;
}

@media (max-width: 650px) {
header .fullheight .hgroup h1 {
font-size: 2.5em;
}
}

header .fullheight .hgroup h2 {
display: block;
color: #FFFFFF;
width: 60%;
max-width: 300px;
margin: 0 auto;
text-align: center;
border: 1px solid #FFFFFF;
margin-top: 15px;
padding: 10px;
font-size: 1.3em;
background: rgba(18, 64, 133, 0.5);
}

header .fullheight .hgroup p {
text-align: center;
}

header .fullheight .hgroup p img {
padding-top: 50px;
max-width: 50px;
}

这是我的IE CSS的CSS - 我已经从该网站尝试了两种不同的方法，但我应该删除一个。但是当我尝试两者时，它们都没有在IE中自行工作。我一定是做错了。

#bg {
position: fixed; 
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%;
}

#bg img {
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
margin: auto; 
min-width: 50%;
min-height: 50%;
}

.fullheight {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/gallery/web_photo.jpg',
sizingMethod='scale');
-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/gallery/web_photo.jpg',   sizingMethod='scale');
}

Answer 1

希望这会对你有所帮助。我有一个项目，需要一个背景图片，我也希望它能在所有浏览器中运行。以下是我的工作方式

的CSS：

body {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Answer 2

可以请您尝试

background-size：自动

覆盖与IE不兼容的背景图像，试图找到有效的替代方案

2 个答案: