CSS непрозрачност: контрол на прозрачността

За да контролирате прозрачността на елементите на страницата, използвайте свойството CSS opacity. Според спецификацията тя е приложима за възли от всякакъв тип и се поддържа във всички съвременни браузъри. С него можете да създадете интересен дизайн или да приложите удобно интерактивно взаимодействие с потребителя.

Възможни стойности

Синтаксисът на свойството за непрозрачност в css изглежда така:

селектор {opacity: 1-} селектор {opacity: 0-} селектор {непрозрачност: 0.4-}

Входът приема цифрови стойности в диапазона от 0 до 1. Параметърът може да бъде част от единица, докато точката се използва като разделител на цяло число и частична част в CSS.

Елемент с нулева прозрачност става невидим, но продължава да заема своето място на страницата и запазва способността си да взаимодейства с потребителя.

Ако стойността на имота се различава от нула, то действителната прозрачност ще се изчислява като процент от горната граница. В обичайната ситуация, непрозрачността: 1 указва пълната непрозрачност на елемента.

Прозрачност на детските възли

Ако обаче елементът има родител, чиято прозрачност се различава от единството, изчислението се променя. Потомственикът не може да бъде "по-прозрачен" от който и да е от неговите предци. CSS свойството на непрозрачността на родителския блок става горната граница на прозрачността на детската възлова точка.

родител {opacity: 0.7-} дете {opacity: 1-}

В такава ситуация детският елемент ще бъде прозрачен 30%, въпреки че стойността на непрозрачност е една.

Примери за използване

Пример 1. Температура. Необходимо е под целевия елемент да се види основният фон на блока.

.цел {background: черно-непрозрачност: 0.5-}

Прозрачното е не само фона на целевия блок, но и текста.

Пример 2. Управление на динамичното прозрачност. Стойността на собствеността на CSS на целевия блок се променя, като курсорът се накланя върху него.

.цел {opacity: 0.2 -}. цел: задръжте {opacity: 1-}

Динамична прозрачност

Последният пример показва, че прозрачните елементи продължават да отговарят на събитията на страницата, като например курсора на мишката върху курсора. Това ви позволява да използвате jаvascript, за да контролирате свойството CSS opacity и да приложите механизмите за преход и анимация, за да промените плавно режима на показване.

За да получите достъп до прозрачност от скрипт, трябва да се обърнете към обекта на стил на конкретен елемент.

// получите текущата стойност на прозрачност var opacity = element.style.opacity - // задайте новата valueelement.style.opacity = 0.4-

Гладкото изчезване на блока може да се осъществи, като се използва преобразуването на CSS собствеността:

елемент {opacity: 0.1-transition: opacity 1000ms-} елемент: задръжте {opacity: 0.8-transition: opacity 2000ms-}

Сега елементният възел ще променя прозрачността от 10 до 80% за една секунда, докато курсорът миши, а когато курсорът изчезне, ще изчезне до първоначалната стойност в рамките на две секунди.

CSS непрозрачността в комбинация с преходния механизъм ви позволява да създавате красиви ефекти.

Алфа канал вместо непрозрачност

Основните тънкости на механизма за непрозрачност в CSS:

• неговото действие се простира не само на фона на блока, но и на текстовото му съдържание, което е за предпочитане да се остави ясно;
• детските елементи не могат да бъдат по-малко прозрачни от родителите.

Ако тези ефекти усложняват живота на оформлението, вместо непрозрачност, трябва да използвате само прозрачен фон, определящ неговата стойност в RGBA или HSLA формат.