Html 将文本置于图像上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2275606/
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
Position text over image
提问by Karem
I have this image:
我有这张图片：
But i want to place text in the middle like this:
但我想像这样在中间放置文本：
How can I achieve this?
我怎样才能做到这一点？
I would like to do this in html, so I would use a <div>or a <span>
我想在 html 中执行此操作，因此我会使用 a<div>或 a<span>
回答by Sampson
Using Pseudo Elements
使用伪元素
The above could be created using the ::beforeand ::afterpseudoelements of the containing element. For instnace, suppose we started with this:
可以使用包含元素的::before和::after伪元素创建上述内容。例如，假设我们从这个开始：
<h1>Keep Calm and Stack Overflow</h1>
We could target the two pseudo elements, set their dimensions and background images, and get the same effect you are seeking above.
我们可以定位两个伪元素，设置它们的尺寸和背景图像，并获得您在上面寻求的相同效果。
h1::before, h1::after {
content: ""; display: block; height: 3em;
background: url('ribbon.png') center center;
}
The above is a mere example of what you may write. For a fuller demo, please see this fiddle.
以上只是您可以编写的内容的示例。有关更完整的演示，请参阅此 fiddle。
Using a Background Image (Original 2010 Answer)
使用背景图像（原始 2010 答案）
Create a div that is the dimensions of your image. Then place your text inside. Use margins/padding on your text to get it vertically-centered, and set text-alignto "center" for its CSS.
创建一个表示图像尺寸的 div。然后把你的文字放在里面。在文本上使用边距/填充使其垂直居中，并将text-align其 CSS设置为“居中”。
.imgBox {
width: 300px; height: 100px;
background-image: url('bg.jpg');
}
.imgText {
text-align: center;
margin: 0; padding: 25px 0 0 0;
}
<div class="imgBox">
<p class="imgText">Hello World</p>
</div>
回答by Furunomoe
You can also use absolute positioning and z-index :
您还可以使用绝对定位和 z-index ：
<img src="yourimagefile.jpg" class="background-image" />
<p class="overlay-text">Your Test</p>
And in the CSS file :
在 CSS 文件中：
.background-image { z-index: -1; }
.overlay-text { position: absolute; top: ??px; left: ??px; }
Some nice references : http://www.w3schools.com/Css/pr_pos_z-index.asp
一些不错的参考资料：http: //www.w3schools.com/Css/pr_pos_z-index.asp
回答by Pekka
To me, this looks like an <img>, then some text in a <span>for example, and then a second <img>. If you put them all into a container that has text-align: centereverything should be fine.
对我来说，这看起来像 a <img>，然后是 a 中的一些文本<span>，然后是第二个<img>。如果您将它们全部放入一个装有text-align: center所有物品的容器中，应该没问题。
回答by Klaus Byskov Pedersen
Create a div of the same width and height as your image and set the image as the background for the div using css. Put vertical alignment middle and horizontal alignment center on the div and add the text to it.
创建一个与图像宽度和高度相同的 div，并使用 css 将图像设置为 div 的背景。将垂直对齐居中和水平对齐居中放在 div 上并向其添加文本。
