Как сделать прозрачный фон в css
Ответы
Вячеслав Межуревский
01 ноября 2022
Для управления прозрачностью фона в CSS есть два инструмента - opacity и rgba. Основное отличие этих инструментов в том, что rgba можно применить точечно, к конкретному элементу, opacity же влияет и на дочерние теги в том числе.
Исходный HTML документ:
<div class="block1"></div>
<div class="block2"></div>
CSS:
div{
width: 300px;
height: 300px;
/* Расположим оба блока друг над другом, чтобы показать эффект прозрачности */
position: absolute;
top: 20px;
left: 20px;
}
.block1 {
/* фон первого блока - картинка */
background-image: url('1.jpg');
}
.block2 {
/* второй блок сделаем меньше для наглядности */
width: 200px;
height: 200px;
/* Вариант №1 */
/* background-color: red; */
/* opacity: 0.7; */
/* Вариант №2 */
background-color: rgba(255, 0, 0, 0.7);
}
Результат:
2
0