html - 文字背后的图像

Question

我想在 H1 标签后面显示一张图片，我还希望图片宽度拉伸(stretch)到与文本相同的宽度。

我的代码:

<div style="display: inline;">
    <img src="http://img585.imageshack.us/img585/3989/m744.png" width="100%" height="68" />
    <h1 style="position: absolute; top: 0px;">Variable length text</h1>
</div>

JSFiddle:http://jsfiddle.net/Aykng/

现在的样子:

期望的外观:

图像宽度应该拉伸(stretch)或缩小以填充 div，我该如何实现？

我希望它与 IE 7+ 兼容，否则我只会使用 background-image 和 background-size。

Answer 1

这可以通过添加一些基本定位轻松完成

演示 jsFiddle

div {
    position: relative;
}
h1 {
    display: inline;
}
img {
    position:absolute;
    width:100%;
    max-width: 100%;
}