Как наложить текст поверх изображения css

Наложение текста на изображение в CSS

Для начала приведу пример:

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

Стоит отметить, что расположить блок с текстом можно также по середине или слева. В моем случае для удобства под правую руку я разместил блок с контактами справа

Итак, каким же образом можно написать текст поверх картинки?

Для этих целей будем использовать каскадные таблицы стилей (css) и чистый html, и ничего более.

Прежде всего правильней будет сказать, что это вовсе не картинка. Она не вставляется на страницу посредством img src. Это блок div с фоном этой картинки на которую мы накладываем другой блок div с текстом. Оба дива имеют свои классы, которым заданы стили.

Итак стили первого дива (который с фоном картинки):

.audit-pic {
    background: url(https://24ho.ru/block/laptop.jpg) 100% 100% no-repeat;
    background-size: cover;
    text-align: center;
    height: auto;
    display: flex;
    justify-content: flex-end;
    padding-top: 50px;
    padding-bottom: 70px;
    padding-right: 40px;
  border: 2px solid grey;
}

И стили второго блока с контактами и текстом:

.audit-pic-text {
    width: 300px;
    color: white;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    font-family: open sans;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px white;
    font-size: medium;
    padding: 15px;
}

А вот и сам код html, который выводит эти два блока:

<div class="audit-pic">
<div class="audit-pic-text">
<p style="font-size:35px;line-height: 50px;">Поисковое продвижение</p>

<p>Достигайте успехов</p>

<p>Вместе с 24ho.ru</p>

<p style="font-size:20px;font-weight:bold;">Тел: +7(904)430-25-67;</p>

<p style="font-size:20px;font-weight:bold;">Email: web@24ho.ru</p>
<button class="stepform_gFgd2ci stepform-btn_default rnd_78683940" style="font-size:16px; border-radius:6px; color:#FFFFFF; background-color:#535AFF">Онлайн заявка</button><script>
    (function(s, t, e, p, f, o, r, m) {
        s[t] = s[t] || {};
        s[t][78683940] = {
            id: "gFgd2ci",
            rnd: 78683940,
            popup: true,
            showType: "button",
            overlayColor: "#000000",
            overlayOpacity: 50
        };
        e.async = true;
        e.src = p + f;
        document[m](o)[r](e)
    }(window,"stepFORM_params",document.createElement("script"),document.location.protocol==="https:"?"https:":"http:","//app.stepform.io/api.js?id=gFgd2ci","head","appendChild","querySelector"));
</script></div>
</div>

Стоит отметить, что если вы разместите на странице лишь html код без css, то разумеется никаких блоков у вас не появятся:

Некрасиво правда?

Также можно разместить блок с текстом на картинке по центру:

Для этого в классе .audit-pic нужно заменить строчку justify-content: flex-end; на justify-content: center;

---

Теперь поговорим о свойствах стилей, которые мы привели выше:

БЛОК С ФОНОМ

background: url(https://24ho.ru/block/laptop.jpg) 100% 100% no-repeat; - Эта строка добавляет фон к диву. Чтобы задать свою картинку вам нужно загрузить ее на свой сервер и прописать путь в скобки.

background-size: cover; - эта строка растягивает изображение по всему блоку

text-align: center; - Эта строка выравнивает весь текст в блоке по центру. Как вы видите текста в блоке выровнены не слева и не справа, а строго по центру.

height: auto; - Эта строка сообщает браузеру, что блок автоматически может расстянуться по высоте на столько на сколько нужно. Это важно для кроссбраузерной верстки.

display: flex; - Эта строка сделала наш блок flex контейнером. Теперь мы можем размещать в нем другие блоки.

justify-content: flex-end; - Здесь мы прописали, что все контейнеры будут размещены в конце блока, т.е. справа.

padding-top: 50px; - Отступ сверху от основного блока равен 50 пикселям. Согласитесь было бы некрасиво, если бы блок с текстом прилипал к верхней границе

padding-bottom: 70px; - тоже самое, только отступ снизу.

padding-right: 40px; - это отступ справа.

border: 2px solid grey; - граница нашего блока. Мы задали ей ширину 2 пикселя и серый цвет

---

БЛОК С ТЕКСТОМ

width: 300px; - ширина блока с текстом. Если мы не установим здесь значение, то он расстянется на весь блок с изображением. Будет не очень эстетично.

color: white; - здесь мы установили цвет шрифта в блоке - белый.

background: rgba(0, 0, 0, 0.4); - у блока с текстом есть свой бэкграунд. Только в этом случае стоит не картинка, а цвет с opacity (прозрачность) со значением 0.4. Это для того, чтобы блок не перекрывал полностью нашу красивую картинку родительского блока.

text-align: center; - моя ошибка, но не критичная. Эта строка также задает центровку всему что находится в блоке. Ее тут можно было бы не использовать, т.к. она есть уже в родительском блоке.

font-family: open sans; - шрифт текста.

border-radius: 10px; - радиус границы полукруглый в значении 10 пикселей.

box-shadow: 0px 0px 10px 2px white; - видите белую тень поверх блока с текстом? Эта строка генерирует его.

font-size: medium; - размер шрифта - средний

padding: 15px; - отступ содержимого от границ второго блока равен 15 пикселям.

---

В заключении

Как всегда стили можно разместить в файл style.css вашего сайта либо на страницу контента в теги <style>вот сюда</style>

Как видите ничего сложного в размещении текста поверх картинки в css нет. Поэкспериментируйте и если у вас возникнут вопросы задавайте их ниже. Урок окончен)