Знакомимся с CSS3. Секреты прозрачного фона и модель RGBa

Июль, 17th 2013Рубрика: Web 9041
Подписаться на комментарии по RSS

наследование CSS

Продолжим знакомство с некоторыми, не совсем очевидными, свойствами CSS3. Одно из таких свойств — прозрачность фонового цвета, заданная в формате RGBa или HSLa.

Не пугайтесь последнего названия HSLa - Hue (оттенок), Saturate (насыщенность) и Lightness (яркость). Буква «A» на конце аббревиатуры означает «альфа» (хорошо знакомо любителям Photoshop) и отвечает за величину прозрачности цвета.

Напрашивается резонный вопрос, для чего в таком случае нужно свойство оpacity (прозрачность) и в чем разница?

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

Однако это не совсем так и тут есть довольно тонкий момент при использовании свойства opacity. Действительно, создавая полупрозрачный div (opacity:0.5), любой вложенный в этот div элемент будет также полупрозрачным. Тонкость в том, что у вложенных элементов непрозрачность идет относительно предка, а не абсолютная. То есть, дочерний элемент не может получить абсолютную видимость выше, чем у предка. Итоговая opacity для элемента вычисляется как произведение opacity этого элемента и opacity всех его предков.

Пример ниже наглядно демонстрирует работу свойства opacity: (в div-блок с белым фоном и прозрачностью 50%, вложена картинка и текст, кроме того у блока задана рамка в 1px белого цвета)

opacity:0.5

Свойство opacity (прозрачность) родительского блока <div> наследуется всеми дочерними элементами.

А теперь смотрим этот же пример, но фон у div-блока задан через CSS3-свойство background-color: rgba(255,255,255,0.5)

background-color: rgba(255,255,255,0.5)

Фоновый цвет блока <div> задан в формате RGBA, который не наследуется дочерними элементами.

На этот раз, все наши элементы, кроме div-блока, остались непрозрачными. Естественно, данный способ сработает только в тех браузерах, которые поддерживают данные возможности CSS3. В очередной раз надеюсь, что парни из Редмонда перестанут изобретать велосипед и присоединятся к большинству.

Подписывайтесь на канал Яндекс.Дзен и узнавайте первыми о новых материалах, опубликованных на сайте.

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

ваш комментарий будет опубликован после проверки
на указанный адрес будет отправлено письмо с кодом активации. Вы можете настроить собственный профиль и стать активным участником или автором.