Как вывести заголовок внутри картинки?

Question

[gomer1726]

Например есть пост у него как обычно есть заголовок и картинка. Так вот как сделать так чтобы ЗАГОЛОВОК выводился внутри картинки.
Я попробовал с помощью PHP но все как то запутано выходит а есть ли способ по проще?

Answer 1

[Олег Букатчук]

Предположим, что заголовок находится под картинкой по умолчанию!
В таком случае укажите для заголовка:

.zagolovok {
margin: -20px 0 0 0; /*смотрите по ситуации на какую высоту нужно поднять*/
color: #fff; /*цвет текста на изображении*/
font-size: 14px; /*размер шрифта заголовка*/
}

Где, zagolovok это Ваш css-класс, который нужно прописать в элемент div

Answer 2

[Никита]

<div class="prev">
<img src="/" alt="">
<span>Заголовок<span>
</div>
<style>
    .prev {
         width: 320px;
         position: relative;}
    span {
         position: absolute;
         top: 20px; // Если нужно наверху прикрепить заголовок, внизу соотвественно bottom: 20px}
</style>

Должно сработать=)

Answer 3

[Игорь Воронов]

А бекграундом не положить картинку?
Не надо никаких маргинов...

Ну вот, например, за пару минут накидал: codepen.io/anon/pen/adroLr

Да и "Я попробовал с помощью PHP" - что Вы там попробовали? Вам нужно на php сгенерировать html. Просто пробежаться foreach по условному массиву и на каждой итерации генерить элемент списка, в котором будет контейнер url картинки и текстом. Остальное - css, если надо, то и js.

Comments

[Игорь Воронов]

sashabeep: спасибо, капитан! Я как бы тоненько намекнул, что тэг img нам не нужен. Это плохая практика, если угодно.