Установите прозрачность с помощью CSS Opacity и RGBA.

В этой статье мы поговорим о непрозрачности, установив свойства непрозрачности CSS, а также RGBA.

Исходный код:



Курс CSS
Каскадные таблицы стилей, также известные как CSS, являются одной из важных технологий Всемирной паутины (WWW). CSS — это…www.udemy.com



На индексной странице есть только три ‹div› с желтым цветом и красным текстом.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>box</div>
<div>box</div>
<div>box</div>
</body>
</html>

Мы также добавляем светло-голубой цвет фона для тела, чтобы было легче наблюдать за непрозрачностью.

body{background-color: lightblue;}
div{
height: 300px;
width: 300px;
color: red;
font-size: 50px;
font-weight: bold;
margin: 10px;
background-color: yellow;
}

Установите непрозрачность для каждого ‹div›

Чтобы установить прозрачность каждого ‹div›, мы используем свойство opacity.

div:nth-child(1){
 opacity: 0.2; 
}
div:nth-child(2){
 opacity: 0.5; 
}
div:nth-child(3){
 opacity: 0.7; 
}

Чем ниже непрозрачность, тем выше прозрачность этого элемента.

Использование RGBA для установки непрозрачности

Возможно, вы знаете, что текстовое «поле» также следует за непрозрачностью ‹div›, так как это сделать, если вы хотите, чтобы непрозрачность текста оставалась неизменной.

Для этого мы должны использовать RGBA для установки альфа-канала.

Внутри файла CSS установите значение альфа-канала равным значению непрозрачности. Теперь мы можем прокомментировать непрозрачность, а также цвет фона.

body{background-color: lightblue;}
div{
height: 300px;
width: 300px;
color: red;
font-size: 50px;
font-weight: bold;
/* background-color: yellow; */
margin: 10px;
}
div:nth-child(1){
/* opacity: 0.2; */
background-color: rgba(255, 255, 31,0.2);
}
div:nth-child(2){
/* opacity: 0.5; */
background-color: rgba(255, 255, 31,0.5);
}
div:nth-child(3){
/* opacity: 0.7; */
background-color: rgba(255, 255, 31,0.7);
}

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

Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram.