Question

阅读论坛，了解如何获取背景图片以覆盖div，无论大小，并发现“背景大小”CSS属性。它是一个宝石，在Firefox中运行得很漂亮，但不幸的是我正在为IE8是标准的大公司工作。浏览器无法识别“背景大小”，我将不得不作弊以获得所需的效果。

我正在尝试将两个div分层 - 一个图像大小适合img标记中的div，另一个包含要叠加的文本。独立地，两个div都工作正常，但它们根本没有分层。他们一个接一个地出现。

我已经测试了z-index值，绝对和相对定位组合，浮点数等，但没有运气。感觉就像我必须遗漏一些明显的东西，而另一双眼睛会非常感激。

最新的CSS如下：

.case-background {
margin-left: 93px;
margin-right: 93px;
border: 1px solid #665546;
}
.case-background img {
height: 100%;
width: 100%;
position: relative;
z-index: 0;
}
.case-text {
margin: 12px;
padding-left: 35px;
padding-right: 35px;
border: 1px solid #665546;
font-family: Arial, Helvetica, sans-serif;
color: #665546;
border: 1px solid #665546;
font-weight: normal;
background-color: #FFFFFF;
position: relative;
z-index: 1;
}

HTML如下，减去标题信息和html，head，body标签等：

<div class="case-background">
<img src="images/test.jpg" />
<div class="case-text">
<h2>testing header</h2>
<p>testing paragraph</p>
</div>
</div>

Answer 1

CSS3Pie是一个库，它为旧版本的IE添加了许多CSS3功能。如果你坚持IE8但需要支持一些现代的CSS功能，这真的很棒。

最新版本的CSS3Pie包括对background-size样式的支持。因此，使用CSS3Pie，您可以使用标准CSS来获得背景大小效果。

你可以使用其他许多javascript黑客也可以做同样的事情，但CSS3Pie是一个很棒的小工具;我每次都推荐它。

IE8中“background-size”CSS属性的解决方法，试图将两个div分层

1 个答案: