好的,所以我有一个使用 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');
}