文字背后的图像

Question

我想在H1标签后面显示图像,我还希望图像宽度拉伸到与文本相同的宽度.

我的代码:

<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/

目前的外观:

期望的外观:

图像宽度应该拉伸或收缩以填充div,我该如何实现？

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

Answer 1

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

DEMO jsFiddle

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