将文本定位在图像上 [英] Position text over image
问题描述
我有这张图片:
但我想在中间放置文本如下:
But i want to place text in the middle like this:
我该如何实现?
我想在html中执行此操作,因此我将使用< div>
或< c $ c>< span>
I would like to do this in html, so I would use a <div>
or a <span>
推荐答案
使用伪元素
可以使用 :: before
和 :: after
伪元素包含元素。对于instnace,假设我们开始这样:
Using Pseudo Elements
The above could be created using the ::before
and ::after
pseudoelements of the containing element. For instnace, suppose we started with this:
<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.
>
创建一个div,即图片的尺寸。然后把你的文本内。在文本上使用边距/填充以使其垂直居中,并为其CSS设置 text-align
为center。
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-align
to "center" for its 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>
这篇关于将文本定位在图像上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!