Background css transparent: background-color — CSS: Cascading Style Sheets

Непрозрачность CSS — Studytonight

Свойство непрозрачности CSS определяет прозрачность элемента по шкале от 0,0 до 1,0 . Чем больше значение непрозрачности, тем четче элемент. Элемент полностью прозрачен или прозрачен, когда значение равно 1.0 , что также является значением по умолчанию, при 0.5 элемент отображается довольно размыто , а при 0.0 элемент полностью непрозрачен.

Синтаксис свойства непрозрачности в CSS

 Элемент HTML{
непрозрачность: значение;
} 

Пример: Применение непрозрачности к элементу HTML

В данном примере мы создали три заголовка, используя элементы

,

и

. В заголовке

1 мы указали значение непрозрачности на 0,0 , в заголовке 2 мы указали значение непрозрачности на 0,5 , и в заголовке 3 мы указали значение от до 1,0.

 

<голова>

<стиль>
ч2 {
цвет фона: красный;
непрозрачность: 0,0;
}
h3{
непрозрачность: 0,5;
цвет фона: красный;
}
h4{
непрозрачность: 1,0;
цвет фона: красный;
}


<тело>
 
Заголовок 1
 
 
Заголовок 2
 
 
Заголовок 3
 


 

Выход:

Итак, после реализации мы видим, что заголовок 1 со значением 0.0 — это , вообще не видимый . В заголовке 2 , значение opacity равно 0,5 , содержимое довольно размыто , но видимо , а в заголовке 3 значение opacity равно 1,0 90 004 четко видно .

Прозрачность и эффект наведения в CSS

CSS позволяет нам использовать непрозрачность CSS вместе с :эффект наведения . Когда мы обеспечиваем эффект наведения для любого элемента, его непрозрачность изменяется, когда пользователь наводит на него указатель мыши.

Пример: применение эффекта прозрачности и наведения в CSS

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

 

<голова>
<стиль>
картинка {
  непрозрачность: 0,5;
}
изображение: наведите {
  непрозрачность: 1,0;
}


<тело>
 
Прозрачность изображения
 





 

Вывод:

Как мы видим, все три изображения являются размытыми, потому что мы указали свойство CSS opacity со значением 0,5 . Когда мы переместим курсор на любое из изображений , он снова станет прозрачным , потому что мы указали значение непрозрачности на 1 после эффекта наведения .

Добавление текста в прозрачное поле в CSS

С помощью CSS мы также можем вставить текст поверх изображения вместе со свойством непрозрачности. Давайте разберемся с этим на живом примере.

Пример: Добавление текста в прозрачное поле с помощью непрозрачности CSS

В этом примере мы создали элемент