将文字放在图像上

Question

我有这个图像:

但我想将文本放在中间,如下所示:

我怎样才能做到这一点？

我想用html做这个,所以我会用a <div>或a<span>

Answer 1

使用伪元素

上述可以使用被创建::before并::after包含元素的pseudoelements.对于instnace,假设我们从这开始:

<h1>Keep Calm and Stack Overflow</h1>

我们可以定位两个伪元素,设置它们的尺寸和背景图像,并获得您在上面寻求的相同效果.

h1::before, h1::after {
    content: ""; display: block; height: 3em;
    background: url('ribbon.png') center center;
}

以上只是您可能写的内容的一个例子.有关更全面的演示,请看这个小提琴.

使用背景图像(原始2010答案)

创建一个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>