Свойства CSS3 (rgba, hsla и прозрачность фона)

Статья последний раз была обновлена 30.03.2023

Сегодня я хочу поговорить о прозрачном фоне блока текста, как его делать, и что для этого предлагает CSS3. Перед тем, как перейти к rgba и hsla, рассмотрим примеры использования полупрозрачного фона для блока с текстом, а точнее то, как это достигается и какие проблемы возникают.

Полупрозрачный фон без rgba и hsla

1. Полупрозрачный PNG. Оптимальный вариант, т.к. на сегодняшний день он самый кроссбраузерный и самый простой. Для того, чтобы блок был прозрачен, необходим однопиксельный полупрозрачный PNG, который задан в качестве бэкграунда блока. И все. Недостатки: требуется хак для IE6 и младше, устраняющий проблему с полупрозрачностью.
2. Прозрачность через opacity. Прозрачность блока задается кроссбраузерно следующим образом:

   opacity: 0.5;
   filter: alpha(opacity=50);
   -moz-opacity: 0.5;
   

   Где 0,5 и 50 — это 50% прозрачности. Но есть проблема. Если мы зададим нужному нам блоку такую полупрозрачность, то контент следующего блока также станет полупрозрачным. Однако, выход есть — свободное позиционирование, при помощи которого под блок текста кладется другой блок, которому и задана полупрозрачность.

   Рассмотрим пример. Пусть блок с оранжевой картинкой – это тег body, контейнер, в котором будет и текст и прозрачная подложка – #block_bg, внутри которого блок с полупрозрачным фоном #block_transparent, а блок с текстом – #block_text.

   
       
   Прозрачный блок
       
   Текст текст текст, много-много текста
   
   

   body {background: url(image.jpg);}
   #block_bg {position: relative; overflow: hidden; width: 400px; padding: 10px;}
   #block_text {position: relative; z-index: 100;}
   #block_transparent {
   opacity: 0.5; filter: alpha(opacity=50);
   -moz-opacity: 0.5;
   background: #fff;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 90;
   height: 5000px;
   width: 400px;
   }
   

   Обращаю внимание, что необходимо задавать ширину прозрачного блока, иначе он свернется в 1 пиксел, и ширину общего блока, иначе текст будет выходить за пределы прозрачного блока (хотя ширину можно и тексту задать, но принципиальной разницы не будет). Чтобы были отступы от текста и края прозрачного блока, используем паддинг в шестой строке. Чтобы прозрачность была регулируема по высоте, задаем ей высоту побольше и перекрытие для общего блока.

   Итак, мы запихнули все в один блок, который можно вставить в любую часть страницы, где есть интересная подложка. Да, может возникнуть желание поставить бэкграунд общему блоку block_bg, но лучше не стоит — осложните себе жизнь. Иными словами, лучше всю эту конструкцию запихнуть в отдельный блок, которому задать паддинг и не мучиться. Недостатки: слишком громоздко.

rgb и hsl, rgba и hsla — свойства CSS3

Точнее это не совсем свойства — это новая возможность задавания цвета для таких свойств как background, color, border и т.д.

Название свойств пошли от цветовых систем RGB (Red, Green, Blue) и от HSL (Hue, Satutation, Lightness). Первая система описывает цветовое пространство посредством смешивания основных цветов — красного, зеленого и синего. Во второй системе компоненты цвета отображают информацию о цвете в более привычной для человека форме: Что это за цвет? Насколько он насыщенный? Насколько он светлый или темный?

rgb и rgba

Начнем с rgb и rgba. Значения r, g, b могут задаваться от 0 до 255 или от 0% до 100%. Значение a (alpha, прозрачность) измеряется от 0 до 1 (дробные значения задаются через точку — 0.4, 0.7 и т.д.). Если для r, g и b будут задаваться значения, превышающие их допустимый диапазон (например, 300 или 110% или -5), то они сократятся к ближайшему допустимому значению.

Рассмотрим все на примере свойства background (хотя желающие могут взять color или border).

background: rgb(0, 0, 255); /*чисто синий цвет*/
background: rgb(100%, 50%, 0%); /*чисто синий цвет*/
background: rgb(10, 145, 500); /*будет распознано как 10, 145, 255*/
background: rgba(10, 145, 255, 1); /*тоже самое, что и предыдущее*/
background: rgba(100, 50, 255, 0.1); /*очень прозрачный оттенок сиреневого*/

Да, забыла сказать, что нельзя между свойством и открывающей скобкой ставить пробел и нельзя задавать в одной строке одни значения в обычных числах, а другие в процентах. Если так сделаете — ничего не будет работать.

hsl и hsla

И несколько слов о hsl и hsla. Значение a задается также, как и у rgb и rgba, а с первыми тремя параметрами дело обстоит немного по другому. h задается от 0 до 360, а s и l — от 0% до 100%.

И самое главное. Если в rgb определить цвет из головы очень сложно (почти всегда необходима сторонняя программа с «пипеткой»), то здесь достаточно иметь одну картинку перед глазами, чтобы все стало на свои места. Картинка показывает оттенки параметра h.

Чтобы прикинуть необходимый цвет, выбираем оттенок, затем прикидываем s, насыщенность цвета (где 0%, это ненасыщенный цвет (оттенок серого), а 100%, это самая насыщенность) и его светлоту (0% — при нем цвет всегда будет черный, а при 100% — белый). Исходя из вышесказанного, на картинке показаны световые тона при насыщенности 100% и светлоте 50%.

Теперь все цветовое пространство в голове как на ладони. Конечно ручной подбор не заменяет пипетку, да и не всем нужно в голове иметь «цветовое пространство», но иногда, чтобы быстро прикинуть что надо и потестить — оно подходит.

И буквально пара примеров

background: hsl(180, 100%, 50%); /*насыщенный голубой цвет*/
background: hsla(140, 50%, 30%, 0.5); /*полупрозрачный, едва заметно, что оттенок зеленого*/

Недостатки: все 4 свойства не поддерживаются ишаком и старыми браузерами.

Завершение

В общем, CSS3 дает очередные очень полезные вещи, но как всегда, IE — основной тормоз прогресса. Для сайтов клиентов я бы пока воздержалась от использования (еще мозг зазря будут выносить) и брала бы вариант с PNG. А на своем сайте — почему бы и нет. Особенно, если его посещают продвинутые люди, не сидящие на ишаках или каких-либо осколках древности.