我有这张图片:
但我想像这样在中间放置文本:
我怎样才能做到这一点?
我想在 html 中执行此操作,所以我会使用 <div>
或 <span>
最佳答案
使用伪元素
以上可以使用包含元素的 ::before
和 ::after
伪元素创建。例如,假设我们从这个开始:
<h1>Keep Calm and Stack Overflow</h1>
我们可以定位这两个伪元素,设置它们的尺寸和背景图片,并获得您在上面寻求的相同效果。
h1::before, h1::after {
content: ""; display: block; height: 3em;
background: url('ribbon.png') center center;
}
以上只是您可以编写的示例。有关更完整的演示,请参阅 this fiddle .
使用背景图片(2010 年原始答案)
创建一个 div,它是您图像的尺寸。然后把你的文字放在里面。在文本上使用边距/填充使其垂直居中,并将其 CSS 的 text-align
设置为“center”。
.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>
关于html - 将文本置于图像之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2275606/