Затемнить картинку на заднем фоне
от v2Team
Иногда стоит задача наложить на картинку или баннер текст, но далеко не все картинки подходят для этих целей, так как текст зачастую становится слабочитаемым.
Давайте рассмотрим на примере.
Тут у нас интересный текст
А тут кнопка
А тут кнопка
<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>
Поработаем?
Опишите свой запрос, мы расчитаем стоимость вашей задачи.