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


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

Тут у нас интересный текст
А тут кнопка
<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 минут


Поработаем?

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