1

通读论坛获取背景图像以覆盖 div 的方法，无论大小如何，并发现了“background-size”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如下，减去header info和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>
4

1 回答 1

1

CSS3Pie是一个库，它为旧版本的 IE 添加了许多 CSS3 功能。如果您卡在 IE8 上但需要支持一些现代 CSS 功能，那就太好了。

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

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

于 2013-02-26T20:27:37.870 回答