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


Давайте рассмотрим на примере.

Тут у нас интересный текст
А тут кнопка
<style>
    .divone {
        background: url('/upload/iblock/9c9/flatlay.jpg');
        height: 400px;
        background-position: center;
        background-size: cover;
        position: relative;
    }
    .divtwo {
        position: absolute;
        right: 20%;
        bottom: 20%;
        color: #fff;
        text-transform: uppercase;
    }
</style>
<div class="divone">
    <div class="divtwo">
        Тут у нас интересный текст<br>
        <a class="btn btn-warning btn-min-width" >А тут кнопка</a>
    </div>
</div>

Для того что бы не лезть в фотошоп и накладывать затемнение для фона, можно воспользоваться таким приемом. Нам поможет linear-gradient.

Тут у нас интересный текст
А тут кнопка
<style>
    .divone {
        background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('/upload/iblock/9c9/flatlay.jpg');
        height: 400px;
        background-position: center;
        background-size: cover;
        position: relative;
    }
    .divtwo {
        position: absolute;
        right: 20%;
        bottom: 20%;
        color: #fff;
        text-transform: uppercase;
    }
</style>
<div class="divone">
    <div class="divtwo">
        Тут у нас интересный текст<br>
        <a class="btn btn-warning btn-min-width" >А тут кнопка</a>
    </div>
</div>

Вы можете экспериментировать с цветом наложения

Тут у нас интересный текст
А тут кнопка
<style>
    .divone {
        background:linear-gradient( rgba(5, 37, 152, 0.5), rgba(5, 37, 152, 0.5) ),url('/upload/iblock/9c9/flatlay.jpg');
        height: 400px;
        background-position: center;
        background-size: cover;
        position: relative;
    }
    .divtwo {
        position: absolute;
        right: 20%;
        bottom: 20%;
        color: #fff;
        text-transform: uppercase;
    }
</style>
<div class="divone">
    <div class="divtwo">
        Тут у нас интересный текст<br>
        <a class="btn btn-warning btn-min-width" >А тут кнопка</a>
    </div>
</div>

Либо можете затенять только часть картинки

Тут у нас интересный текст
А тут кнопка
<style>
.divone {
background:linear-gradient( linear-gradient( #000000, rgba(0, 0, 0, 0.5) ),url('/upload/iblock/9c9/flatlay.jpg');
height: 400px;
background-position: center;
background-size: cover;
position: relative;
}
.divtwo {
position: absolute;
right: 20%;
bottom: 20%;
color: #fff;
text-transform: uppercase;
}
</style>
<div class="divone">
<div class="divtwo">
Тут у нас интересный текст<br>
<a class="btn btn-warning btn-min-width" >А тут кнопка</a>
</div>
</div>
Готовы сделать всю работу за Вас
от375
  • 30 минут


Поработаем?

Опишите свой запрос, мы расчитаем стоимость вашей задачи.