文字背后的图像

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%;
}

Answer 2

这似乎有效（也在IE8中）：

div将与<h1>一样大（文本现在没有居中，因为它的边距，你必须更改它们以使它适合！

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

http://jsfiddle.net/Aykng/9/

Answer 3

这是另一种不使用display: inline-block和IE7黑客的方法：

<div class="parent">
    <img src="http://img585.imageshack.us/img585/3989/m744.png" 
         width="100%" height="68" />
    <h1>Variable length text</h1>
</div>

使用CSS：

.parent {
    display: inline;
    position: relative;
}
.parent img {
    position: absolute;
    top: 0;
    left: 0;
}
.parent h1 {
    display: inline;
    position: relative; /* this makes sure the h1 is in 
                           front of img in stacking order */
    border: 1px dotted lightgray;
    padding: 0 10px; /* optional, tweak left/right as needed */
    vertical-align: top;
    line-height: 68px;
}

演示小提琴：http://jsfiddle.net/audetwebdesign/BfMDJ/

这与Vector的早期解决方案相同，除了如何处理图像的高度。

我选择将h1的行高设置为与背景图片的行高相匹配（本例中为68px），然后应用vertical-align: top。如果您愿意，这样可以更容易地垂直对齐文本。

潜在问题

如果将图像宽度设置为100％并设置高度，则图像会变形。 如果您想要更强大的答案，则需要指定有关背景图像的内容以及文本如何垂直居中。

Answer 4

使用：

display: inline-block;

在div css上。

并将图像作为div的“背景图像”。

Answer 5

您可以使用以下代码。它适用于包括IE 7在内的各种浏览器。

<div style="display: inline-block;background: url('http://img585.imageshack.us/img585/3989/m744.png') repeat; *display:inline;*zoom:1;">
    <h1>Variable length text</h1>
</div>