css - 是否可以在内联图像上显示

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 上使用背景图像。