• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как наложить текст на картинку в HTML + CSS (Пишем текст поверх изображения с привязкой фона на CSS)
Как наложить текст на картинку в HTML + CSS
Kosten
Дата: Пятница, 2019-02-22, 00:05 | Сообщение 1
Администраторы
Сообщений:23411
Награды: 56


Иногда нам нужно красиво наложить текст по вверх картинки или изображение, чтоб все красиво и органично смотрелось. Для этого есть один вариант, где изначально создадим темно прозрачный фон, по размерам, где только будет помещено описание или ключевое слово.

Также этому фону изначально в стилистике задаем оригинальную композицию, чтоб все смотрелось в уникальном виде. Так, чтоб было отлично просматривать картинку, и текст для пользователя был читабельным.

Так выглядит после, как все установите, где также самостоятельно можно оформить под свой сайт.



Приступаем к установке:

HTML

Код
<div class="ganonkuned-businetes">    
    <div class="demizavion-gaconanus">
        <div class="demands-kaxekog">
            <h1>Вебмастер</h1>
            <h2>Сайт ZorNet.ru - портал! </h2>
        </div>
    </div>
</div>


CSS

Код
.ganonkuned-businetes {    background:url(Ссылка на изображение);    
    background-size:cover;
    background-position:center;
    height:375px;
  width: 774px;
    position:relative;
}
.demizavion-gaconanus {
    text-align: center;
    position: absolute;
    bottom: 8%;
    width: 332px;
    left: calc(50% - 150px);
    background: rgba(19, 18, 18, 0.58);
    transform: skew(-20deg);
    color: #f8fafb;
    text-shadow: 0 1px 0 #2f2d2d;
}
.demands-kaxekog {
    transform: skew(20deg);
}

Здесь безусловно не обойтись без HTML и стилистики CSS, которая отвечает за форму фона, да и вообще как располагается информационная таблица, которую можно поставить под разный оттенок цвета и выставить нужную прозрачность.

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