Текст върху картинка

[ystefanov]

Как мога да позиционирам текст върху картинка, но отдолу картинката да не е като background? Има ли друг начин освен с абсолютно позициониране?

 

[shterev]

друг начин няма, освен ако не кажеш каква точно е идеята

 

[Vladkata]

<div class="picture">
     Текста ти е тук.
</div>

[css]
.picture{
background-image: url(picture.jpg);
background-repeat: no-repeat;
//размери на картинката
width: px;
height: px;
display: inline-block;
//примерен стил за текста
text-align: center;
font-size: 12px;
color: white;
text-shadow: 2px 1px #333;
font-family: segoe ui, sans-serif, arial;
position: absolute;
//ако искаш да е по средата
margin-left: auto;
margin-right: auto;
}
[/css]

Успех!

 

[misho]

Но ystefanov каза, че не иска като фон, не знам защо. :?
Иначе може да се направи, текста да е в един div, на който му е зададено z-index: 2;, например. Така текста ще е над картинката, но пък има малко повече играчка, докато го нагласиш да стои, точно където трябва.

 

[ystefanov]

Целта е да излиза като картинка със ALT таг (заради SEO изсквания), заради това избягвам начина с background.