2

我的问题是我必须保持与 IE 8 的兼容，所以没有 CSS3 唯一的答案。

我知道我可以使用 background-image 属性，但我不能使用 background-size 属性，因为它只是 CSS3。

我知道我可以调整图像的大小然后简单地应用它，但是，我不知道元素的确切大小是多少（我不介意将高度设置为“px”值，但我总是使用宽度百分比，即使对于 body 元素 [没有人喜欢水平滚动条！]）。

我必须在这个背景图像上居中一些文本，所以我也尝试只插入一个<img>标签，然后将文本放在一个 span 元素中，position: absolute;但我怀疑使用leftandtop属性来“微观管理”这种定位将证明在所有浏览器、屏幕尺寸和屏幕分辨率中看起来都一样（请纠正我，如果我错了，但这将是一个公共站点，并且每个人都必须看起来相同）。话虽如此，但如果我可以确信无论用户的个人浏览器、屏幕或分辨率选择如何，使用定位看起来都是一样的，我并不反对使用这种方法。

有什么方法可以在不完全依赖 CSS3 的情况下处理这个问题？

我认为没有任何理由发布任何标记或 CSS，但如果它会有所帮助，请告诉我，我会很高兴。

澄清一下：我需要整个图像“适合”元素，我并不真正关心纵横比。

4

2 回答 2

3

你可以很简单地做到这一点：

html:

<div class="holder">
    <img src="http://www.lorempixel.com/400/200/" />
    <div class="text">Testing text</div>
</div>

CSS：

.holder {position:relative; width:100%; overflow:hidden;} //this has overflow hidden so it treats the image like a background and hides any extra
.holder img {position:absolute; left:0; top:0; width:100%; z-index:1;}
.holder .text {position:relative; z-index:2; text-align:center;} //this is positioned relative so the div grows to the size of the text

http://jsfiddle.net/UANFm/2/

于 2013-04-25T13:53:54.883 回答
2

没有javascript就很难了。

您可以将其添加为普通图像，将位置设置为相对并在所有其他内容下对其进行 z-index，然后将宽度设置为 100%。但这仍然是一种有点骇人听闻的方式，而且我还没有测试过。

编辑试试这个：http: //jsfiddle.net/xTgCY/

<div class="wrapper">
    <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSaATzueHSd2rQXCWUQXFXc1sFAx3tNXBj-px5bU64D4ji5rmF6cw">
        <div class="content">aihadfuigh iaghdf aoisyhif o[iayhdf oiahdfio sadf</div>
</div>

.wrapper {
    width: 300px;
    position: relative;
}
.wrapper img {
    position: relative;
    z-index: -5;
    width: 100%;
}
.content {
   position: absolute;
   z-index: 0;
   top: 0;
    left: 0;
    width: 100%;
}
于 2013-04-25T13:50:15.017 回答