Можно ли показать текст внутри <h3> поверх встроенного изображения, не используя <span>и изображения в фоновом режиме?

Question

Можно ли показать текст внутри <h3> поверх изображения, не используя <span> и изображения в фоновом режиме?

HTML

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

CSS

h3{ }
h3 img { }

Answer 1

Вот демо

http://jsbin.com/ozobo5

Answer 2

Нет, я не думаю, что это возможно сделать так, как вы задали в вопросе.

И поверьте мне, Я пытался .

Там просто нетспособ стилизовать этот текст без элемента, его заключающего.Единственная надежда, которую я имел, была :first-line псевдоэлементом, но это тоже не помогло .

Это довольно легко сделать в вашей скрипке , хотя, который полностью отличается от вопроса, который вы задали в первую очередь:

http://jsfiddle.net/thirtydot/vqaFf/1/

Answer 3

Использование тега img внутри тега h3 является плохой практикой.

Вы можете сделать следующее:

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