Is it possible to show the text inside <h3> over the inline image, without using <span> and images in background?

Is it possible to show the text inside <h3> over the image, without using <span> and images in background?

HTML

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

CSS

h3{ }
h开发者_StackOverflow中文版3 img { }

To have a img tag inside of a h3 tag is bad practice.

what you could do is:

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

and then alter the position or padding and margin to maneuver the text over the image, maybe put a z-index to ensure it shows the text on top.

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

The easiest way though is to use a background image on the h3.

Here is a demo

http://jsbin.com/ozobo5

No, I don't think it's possible to do it how you asked in the question.

And believe me, I tried.

There's just no way to style that text without an element enclosing it. The only hope I had was the :first-line pseudo-element, but that didn't help either.

It's pretty easy to do it in your fiddle though, which is completely different to the question you asked in the first place:

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