Скрипты » Текст, Изображения


Текст поверх изображения HTML + CSS

"Как разместить текст поверх изображения?". Некоторые находят выход: они рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в html документах. Но что делать, если текст надо заменить? Опять перерисовывать картинку? Есть более простые решения.

Способ первый: картинка как фон div

<div class="example1">Текст</div>

Суть способа заключается в том, что мы берём тег div, задаём ему размеры, совпадающие с размером изображения, и устанавливаем картинку в качестве фона.
Обратите внимание, что размер тега = собственный размер + размер отступов padding. Таким образом, если мы хотим сделать отступ содержимого от края картинки на 20px, то размер самого div нужно указать на эти 20px меньше. То есть: 716-20 = 696 в ширину и 350-20 = 330 в высоту.

Я сделал текст во рту у Вейдера. (получилось это так wild=413 padding-left=303 height=100 padding-top=250)

.example1 {
    padding-top:250px;
    width:413px;
    padding-left:303px;
    height:100px;
    background-image:url("http://dml.ucoz.net/_sf/0/51237425.jpg");
     
    /*оформление текста*/
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:40px;
}

Результат:  

ТексТ


Способ простой по структуре хтмл кода (требуется всего один тег), но зато он не позволяет задать тексту какие-то особые стили. В результате чего может получиться так, что текст будет сложно прочитать. Кроме того, блок жёстко привязан к размерам картинки, а значит, в случае изменения картинки придётся переписывать и css, и не подходит для адаптивных картинок.

Способ второй: наложение двух тегов друг на друга

<div class="example2">
    <img src="http://dml.ucoz.net/_sf/0/51237425.jpg" />
    <span>Я твой отец...</span>
</div>

Суть этого способа в том, что мы делаем div-контейнер, который будет содержать в себе картинку и текст. При этом текст мы будем позиционировать относительно левого верхнего угла контейнера.

.example2 {
    display:inline-block;  
    position:relative;
 
}
.example2 span {
    display:inline-block;
    position:absolute;
    top:30px;  
    left:0px;
     
    /* Оформление текста */
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
     
    /* Фон */
    background-color:rgba(0,0,0,.4);
    padding:10px 30px;
}

.example2:
display:inline-block нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
position:relative заставляет все вложенные блоки с position:absolute вести отсчёт координат своего положения не от окна браузера, а от блока .example2.
.example2 span:
display:inline-block - для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
position:absolute - для вынимания тега из общего потока и дальнейшего его размещения с помощью задачи конкретных координат. top, left - отступы сверху и слева (координаты). возможно вместо них использовать bottom (снизу) и right (справа)

Результат:  

Я твой отец...

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

Играя с css и структурой тегов можно добиться и такого результата:  

Дарт Вейдер
Верховный Главнокомандующий Имперской армией, Владыка Ситх

Код последнего результата:

<div class="example3">
    <img src="http://dml.ucoz.net/_sf/0/51237425.jpg" />
    <div class="example_text">
        <h6>Дарт Вейдер</h6>
        <span>Верховный Главнокомандующий Имперской армией, Владыка Ситх </span>
    </div>
</div>
 
.example3 {
    display:inline-block;  
    position:relative;
}
.example3 .example_text {
    display:block;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
     
    color:#fff;
         
    padding:10px;
    background-color:rgba(0,0,0,.3);
 
     
}
.example3 h6 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
}
.example3 span {
    font-size:12px;
}
 
картинка, CSS, Скрипт, HTML, Изображения, поверх, Текст
Комментариев: 2
avatar
0
1 ART1 • 10:59, 20.12.2016
Спасибо, то что искал.
avatar
0
2 admin • 14:00, 18.06.2018
Текст под картинкой, а не на ней, почему?
Войдите:
avatar