CSS — Прозрачность

CSSДоброго времени суток. В этой статье мы поговорим про свойство, которое отвечает за прозрачность любого элемента на веб-странице. Мы научимся применять его для других различных свойств и посмотрим за его поведением.

CSS — Прозрачность

Прозрачность в CSS выглядит как opacity, и регулируется в рамках диапазона чисел с типом float (с плавающей запятой). Соответственно имеет значения от 0.0 до 1.0. Как ни странно это свойство применимо абсолютно ко всем элементам веб-страницы. Соответственно вы можете управлять прозрачностью всех элементов страницы. Давайте рассмотрим несколько примеров:

Немного рандомного текста про прозрачность в CSS.

В этом случае opacity равна 1. Уменьшим ее до 0.5:

Теперь прозрачность этого блока равна 0.5 единиц.

Как видите весь блок стал полупрозрачным. Теперь поступим иначе и обратимся к темной магии веб-программирования. Создадим внутри блока span и внутри него пропишем opacity равной 0.5 единиц, а из блока выше уберем это свойство:

Теперь в это блоке только у текста прозрачность равна 0.5 единиц.

Далее применим свойство opacity, к свойству background. Но если в случае с другими элементами все понятно, то теперь background, превращается в background-color: rgba(233,233,233, 0.1):

Теперь в это блоке только у текста прозрачность равна 0.5 единиц.

Конструкция свойства background-color: rgba(*,*,*,0.*) уже содержит в себе возможность использования свойства opacity. Соответственно нет надобности в том, чтобы отдельно для фона создавать например класс и настраивать у него прозрачность.

Несколько правил прозрачности css:

  • не всей свойства css имеют встроенную возможность настройки opacity
  • каждый раз настраивая прозрачность помните, что элементы расположенные «сзади» (выше по иерархии) буду становится видны.
  • не стоит усердствовать со свойством opacity, лучше работать с фоном.
  • настройка прозрачности не всегда уместна даже для изображений.

Итог

Безусловно свойство является полезным для реализации некоторых эффектов, которые нравятся всем нам. Но лучше работать со статичным свойствами, в которых трудно ошибиться. Неправильно настроенная прозрачность может привести к неверному процессу дебага, в итоге мы можете элементарно запутаться в том, какой тег у вас является родительским и какой дочерним. Особенно легко запутаться, если вы начинающий веб-мастер. Если у вас остались вопросы, милости просим в комментарии.

Чтобы не пропускать новые статьи подписывайте на нашу группу в ВК и ФБ, а так же каналы в телеграме и на ютубе!

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

Опиши свой кейс здесь, если у тебя остались вопросы и мы обязательно ответим...