Главная » 2020 » Февраль » 11 » Текст поверх картинки на CSS
15:28
Текст поверх картинки на CSS

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

HTML:

1
2
3
4
<div class="image">
    <img src="image.jpg">
    <h2><span>Любой текст<br>Абсолютно любой.</span></h2>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.image {
    position: relative;
    width: 100%; /* для IE 6 */
    }
 
h2 {
    position: absolute;
    top: 250px;
    left: 0;
    width: 100%;
    }
h2 span {
    color: #fff;
    font-size: 30px;
    line-height: 55px;
    background: rgba(0, 0, 0, 0.7);
    background: #000;
    padding: 10px;
    }
Категория: Разное | Просмотров: 173 | Добавил: artnov7 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]