image - IE8 中 "background-size"CSS 属性的解决方法，尝试分层两个 div

Question

通过阅读论坛了解如何让背景图像覆盖 div 而不管大小，并发现了“背景大小”CSS 属性。它是一颗 gem ，在 Firefox 中运行良好，但不幸的是，我在一家以 IE8 为标准的大公司工作。浏览器无法识别“背景大小”，我将不得不作弊以获得所需的效果。

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

我已经使用 z-index 值、绝对和相对定位组合、 float 等进行了测试，但没有成功。感觉我一定遗漏了一些明显的东西，如果有另一双眼睛，我们将不胜感激。

最新的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 如下，去掉了header 信息和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 hack 来做同样的事情，但 CSS3Pie 是一个很棒的小工具；我每次都会推荐它。