Question

是否可以在图片上显示<h3>内的文字，而无需在背景中使用<span>和图片？

HTML

<h3>sample caption 1<img alt="" src="banner4.jpg" /></h3>

CSS

h3{ }
h3 img { }

Answer 1

在h3标签内部使用img标签是不好的做法。

你能做的是：

<div>
<h3>sample caption 1</h3>
<img src="banner4.jpg" alt="banner" />
</div>

然后改变位置或填充和边距以在图像上操纵文本，可以放置z-index以确保它在顶部显示文本。

img{z-index:10;position:absolute;top:0px;left:0px;}
h3{z-index:20;}
div{position:relative;}

最简单的方法是在h3上使用背景图像。

Answer 2

这是一个演示

Answer 3

不，我认为不可能按照你在问题中提出的方式去做。

相信我，我试过。

如果没有包含它的元素，那么就无法设置该文本的样式。我唯一的希望是:first-line伪元素，但didn't help也是。

在your fiddle中执行此操作非常简单，这与您首先提出的问题完全不同：