0

好的,所以我有一个使用 background-size: 封面的背景图片。现在我知道 IE 不喜欢它。因此,我正在尝试实现它在此页面上讨论的一些方法: http: //css-tricks.com/perfect-full-page-background-image/使用 IE 的 CSS 文件。我希望我的 background-size:cover 对于所有浏览器都保持不变,但 IE 和一个 IE CSS 用于 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');
}
4

2 回答 2

0

希望这会对您有所帮助。我有一个项目,它需要一个背景图片,我也希望它可以在所有浏览器中工作。这是我的工作方式

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;

}

于 2014-11-12T23:43:02.480 回答
0

你能试试吗

背景尺寸:自动

于 2020-12-17T10:57:28.437 回答