html – 将文字放置在图像上

我有这个形象：

但是我想在中间放置文本：

我该如何实现？

我想在html中这样做,所以我将使用< div>或者< span>

解决方法

使用伪元素

可以使用包含元素的:: before和:: after伪元素创建上述内容.对于instnace,假设我们从这开始：

<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,即您的图像的尺寸.然后把你的文本放在里面.在文本上使用边距/填充,使其垂直居中,并将text-align设置为“中心”.

.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>