Html 文字背后的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18447263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image behind text
提问by Drahcir
I want to display an image behind an H1 tag, I also want the image width to stretch to the same width as the text.
我想在 H1 标签后面显示一个图像，我还希望图像宽度拉伸到与文本相同的宽度。
My code:
我的代码：
<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/
JSFiddle：http: //jsfiddle.net/Aykng/
Current Appearance:
当前外观：
Desired Appearance:
期望外观：
The image width should either stretch or shrink to fill the div, how can I achieve this?
图像宽度应该拉伸或收缩以填充 div，我该如何实现？
I want it to be compatible with IE 7+, otherwise I would just use background-imageand background-size.
我希望它与 IE 7+ 兼容，否则我只会使用background-image和background-size.
回答by Kevin Lynch
回答by x4rf41
this seems to work (also in IE8):
这似乎有效（也在 IE8 中）：
the div will be as big as the <h1>(the text is not centered now because of its margins, you have to changed those to make it fit!
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>
回答by Marc Audet
Here is another way of doing it without using display: inline-blockand a IE7 hack:
这是另一种不使用display: inline-blockIE7 hack 的方法：
<div class="parent">
<img src="http://img585.imageshack.us/img585/3989/m744.png"
width="100%" height="68" />
<h1>Variable length text</h1>
</div>
with the CSS:
使用 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;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/BfMDJ/
演示小提琴：http: //jsfiddle.net/audetwebdesign/BfMDJ/
This is identical to an earlier solution by Vectorexcept in how the height of the image is handled.
这与Vector的早期解决方案相同，只是图像高度的处理方式不同。
I chose to set the line height for h1to match that of the background image (68px in this example), and then apply vertical-align: top. This makes it easier to vertically align the text if you so desire.
我选择设置行高h1以匹配背景图像的行高（在本例中为 68px），然后应用vertical-align: top. 如果您愿意，这可以更轻松地垂直对齐文本。
Potential Issue
潜在问题
If you set the image width to 100% and set the height, then the image will get distorted. You would need to specify something about the background image and how you want the text to be centered vertically if you want a more robust answer.
如果将图像宽度设置为 100% 并设置高度，则图像会失真。如果您想要更可靠的答案，您需要指定有关背景图像的内容以及您希望文本如何垂直居中。
回答by Vikas Singhal
You can use the following code. It will work across browsers including IE 7.
您可以使用以下代码。它将跨浏览器工作，包括 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>
回答by Math chiller
use:
用：
display: inline-block;
on the div css.
在 div css 上。
and place the image as the div's "background-image".
并将图像放置为 div 的“背景图像”。
