Доброго времени суток. В этой статье мы поговорим про свойство, которое отвечает за прозрачность любого элемента на веб-странице. Мы научимся применять его для других различных свойств и посмотрим за его поведением.
CSS — Прозрачность
Прозрачность в CSS выглядит как opacity, и регулируется в рамках диапазона чисел с типом float (с плавающей запятой). Соответственно имеет значения от 0.0 до 1.0. Как ни странно это свойство применимо абсолютно ко всем элементам веб-страницы. Соответственно вы можете управлять прозрачностью всех элементов страницы. Давайте рассмотрим несколько примеров:
В этом случае opacity равна 1. Уменьшим ее до 0.5:
Как видите весь блок стал полупрозрачным. Теперь поступим иначе и обратимся к темной магии веб-программирования. Создадим внутри блока span и внутри него пропишем opacity равной 0.5 единиц, а из блока выше уберем это свойство:
Далее применим свойство opacity, к свойству background. Но если в случае с другими элементами все понятно, то теперь background, превращается в background-color: rgba(233,233,233, 0.1):
Конструкция свойства background-color: rgba(*,*,*,0.*) уже содержит в себе возможность использования свойства opacity. Соответственно нет надобности в том, чтобы отдельно для фона создавать например класс и настраивать у него прозрачность.
Несколько правил прозрачности css:
- не всей свойства css имеют встроенную возможность настройки opacity
- каждый раз настраивая прозрачность помните, что элементы расположенные «сзади» (выше по иерархии) буду становится видны.
- не стоит усердствовать со свойством opacity, лучше работать с фоном.
- настройка прозрачности не всегда уместна даже для изображений.
Итог
Безусловно свойство является полезным для реализации некоторых эффектов, которые нравятся всем нам. Но лучше работать со статичным свойствами, в которых трудно ошибиться. Неправильно настроенная прозрачность может привести к неверному процессу дебага, в итоге мы можете элементарно запутаться в том, какой тег у вас является родительским и какой дочерним. Особенно легко запутаться, если вы начинающий веб-мастер. Если у вас остались вопросы, милости просим в комментарии.
Чтобы не пропускать новые статьи подписывайте на нашу группу в ВК и ФБ, а так же каналы в телеграме и на ютубе!