Не первый раз спрашивают, если материал на сайте, это как сделать или разместить текст поверх картинки с изображением. Что давайте все подробно разберем. Ведь такой формат можно применить много где на своем сайте. Ведь на портале всегда очень много идут изображение к материалу, но когда текст по вверх пропишем, то здесь будет изначально понятно для пользователя, но и для поисковых систем идут ключевые слова.
Где в поиске кто то набирает одно из ключевых слов, то здесь может выдаст вашу тему или картинку. Но это уже пошло продвижение, а нам нужно сделать эффект ключевых слов, которые поместим по вверх картинки, и все будет смотреться красиво и корректно.
Это увидим после как установим код и стили:
HTML
Код
<div class="bakeso-umekad">
<img src="http://images.vfl.ru/ii/1570114108/e5dc99bc/28061441.png">
<h2><span>ZORNET.RU<br>Все для вебмастера</span></h2>
</div>
CSS
Код
.bakeso-umekad {
position: relative;
width: 100%; /* для IE 6 */
}
h2 {
position: absolute;
top: 170px;
left: 0;
width: 100%;
}
h2 span {
color: #fff;
font-size: 22px;
line-height: 70px;
background: rgba(31, 28, 28, 0.87);
background: rgba(25, 24, 24, 0.81);
padding: 8px;
}
Как можно заметить не чего сложного нет, где можно сделать не такую темную форму, а прозрачную.
Демонстрация
