• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Пишем текст поверх изображения на CSS (Как разместить текст поверх картинки при помощи CSS)
Пишем текст поверх изображения на CSS
Kosten
Четверг, 03 Октября 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Не первый раз спрашивают, если материал на сайте, это как сделать или разместить текст поверх картинки с изображением. Что давайте все подробно разберем. Ведь такой формат можно применить много где на своем сайте. Ведь на портале всегда очень много идут изображение к материалу, но когда текст по вверх пропишем, то здесь будет изначально понятно для пользователя, но и для поисковых систем идут ключевые слова.

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

Это увидим после как установим код и стили:



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;
}

Как можно заметить не чего сложного нет, где можно сделать не такую темную форму, а прозрачную.

Демонстрация
Прикрепления: 1392910.jpg (52.8 Kb) · sogyn.zip (3.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Пишем текст поверх изображения на CSS (Как разместить текст поверх картинки при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: