Полупрозрачный бэкграунд css. Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)

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

Смотрим на картинку ниже. Имеется графический фон, на который требуется наложить полупрозрачный блок с текстом. В идеале должно быть то, что на рисунке под цифрой 2, но иногда может возникать то, что под цифрой 3. Есть ещё один дефект, но о нём упомяну словесно чуть ниже, т.к. отскриншотить его не было возможности.

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

1. Полупрозрачный PNG . Оптимальный вариант, т.к. на сегодняшний день он самый кроссбраузерный и самый простой. Для того, чтобы блок был прозрачен, необходим однопиксельный полупрозрачный PNG, который задан в качестве бэкграунда блока. И всё.
   
   Недостатки : Только один – требуется .
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;
   }

   Обращаю внимание, что необходимо задавать ширину прозрачного блока (строка 19), иначе он свернётся в 1 пиксел, и ширину общего блока (строка 5), иначе текст будет выходить за пределы прозрачного блока (хотя ширину можно и тексту задать, но принципиальной разницы не будет). Чтобы были отступы от текста и края прозрачного блока, используем паддинг в шестой строке. Чтобы прозрачность была регулируема по высоте, задаём ей высоту побольше (строка 18) и перекрытие для общего блока (строка 4).
   Итак, мы запихнули всё в один блок, который можно пихать в любую часть страницы, где есть интересная подложка. Да, может возникнуть желание поставить бэкграунд общему блоку 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. А на своём сайте – почему бы и нет. Особенно, если его посещают продвинутые люди, не сидящие на ишаках или каких-либо осколках древности.

С приходом CSS3 работа верстальщиков во многом стала проще и логичнее: ведь теперь можно действительно гибко настроить какой-либо объект, все реже прибегая к JavaScript. Допустим, вам надо настроить прозрачность фона — CSS тут же предлагает несколько вариантов.

Фон задается набором атрибутов , background-repeat, background-attachment, background-origin, background-clip, background-color), причем каждый из них можно прописать отдельно или же объединить под атрибутом background. Разберем каждый из них подробнее.

Атрибут background-color

Такой способ поддерживает даже IE8. Несколько изображений в качестве фона используются при резиновой верстке. Главное, не забывайте при использовании любого изображения также задавать в CSS цвет фона, так как у пользователей может просто не загрузиться картинка.

Атрибут background-position

Если вы используете изображение, чтобы задать фон блока, CSS позволит вам расположить картинку в любом месте экрана. По умолчанию изображение располагается в левом верхнем углу. Атрибут принимает либо словесные указания (top, bottom, left, right), либо численные (проценты, пиксели и другие единицы измерения). При этом необходимо указать два значения: по горизонтали и по вертикали:

body {background-position: right center;} — в этом примере фон будет располагаться в правой части страницы, причем снизу и сверху расстояния до изображения одинаковы.

Атрибут background-size

Иногда требуется с помощью CSS растянуть фон или уменьшить его размер. Для этого используют атрибут background-size, причем размер фона можно задать как в пикселях или процентах, так и в любых других единицах измерения.

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

Атрибут background-attachment

Этот атрибут задает поведение фонового изображения при прокрутке. Так, он может принимать 3 значения (не учитывая inherit, общего для всех представленных в этой статье атрибутов):

• fixed — делает картинку на фоне неподвижной;
• scroll — фон прокручивается вместе с остальными элементами;
• local — изображение на фоне прокручивается, если прокрутку имеет содержимое. Фон, который выходит за рамки содержимого, фиксируется.

Пример использования:

body {background-attachment fixed}.

В настоящее время Firefox не поддерживает последнее свойство (local).

Атрибут background-origin

Этот атрибут отвечает за позиционирование элемента. Браузеры ранних версий требуют использования префиксов. Само свойство имеет три параметра:

• padding-box позиционирует фон относительно края, при этом учитывая толщину рамки;
• border-box отличается от предыдущего свойства тем, что линия границы может полностью или частично перекрывать фон;
• content-box позиционирует изображение, прявязывая его к контенту.

Если задано несколько значений, то браузеры могут реагировать по-своему: Firefox и Opera воспринимают только первый вариант.

Атрибут background-repeat

Как правило, если фон задан изображением, он должен повторяться по горизонтали или вертикали. Для этого и используется атрибут background-repeat. Так, фон блока, CSS которого содержит такое свойство, может иметь один из нескольких параметров:

• no-repeat — изображение появляется на странице в единственном варианте;
• repeat — фон повторяется по осям x и y;
• repeat-x — только по горизонтали;
• repeat-y — только по вертикали;
• space — фон повторяется, но если пространство заполнить не получается, то между картинками появляются пустоты;
• round — изображение масштабируется, если не получается всю область заполнить целыми картинками.

Пример использования атрибута:

body {background-repeat: no-repeat repeat} — аналогично background-repeat: repeat-y.

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

Атрибут background-clip

Этот атрибут определяет поведение фона под границами (например, в случае пунктирных рамок):

• padding-box — фон отображается строго внутри блока;
• border-box — изображение заходит под рамки;
• content-box — картинка на фоне появляется только внутри содержимого.

Пример использования:

body {background-clip: content-box;}.

Chrom и Safari требуют использования префикса -webkit-.

Атрибуты opacity и filter

Атрибут opacity позволяет задать прозрачность фона — CSS свойство будет работать во всех браузерах. Значение устанавливается в пределах от 0.0 до 1.0 включительно. При этом вы можете установить прозрачность фона CSSбез целого значения: вместо 0.3 достаточно написать.3:

.block {background-image: url(img.png); opacity: .3;}.

Чтобы задать прозрачность фона, CSS которого подойдет даже для IE ниже девятой версии, используйте атрибут filter:

.block {background-image: url(img.png); filter: alpha(opacity=30);}.

В этом случае значение opacity устанавливается в пределах от 0 до 100. Учтите, что атрибут opacity отличается от настройки прозрачности с помощью RGBA наследственностью: при использовании opacity прозрачным становится не только фон, но и все элементы внутри блока.

Всегда следите за статистикой использования браузеров по СНГ и всем остальным странам. Самая большая проблема всех верстальщиков — старые версии IE, именно они не позволяют использовать в полной мере CSS3. При верстке не забывайте пользоваться специальными сервисами, которые проверяют, поддерживает ли ваш браузер какое-либо свойство CSS. Если вы не можете установить старые версии браузеров, найдите сервис, который проверит работу сайта в разных браузерах онлайн.

Задача

Сделать блочный элемент со всем его содержимым полупрозрачным.

Решение

Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. В браузере Internet Explorer это свойство не работает, поэтому специально для него приходится использовать filter , свойство, не входящее в спецификацию CSS. В примере 1 показано, как установить прозрачность слоя для всех браузеров.

Пример 1. Полупрозрачный слой

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Полупрозрачный слой в браузере Safari

Свойство filter добавляет прозрачность только для тех элементов, где установлен хотя бы один из размеров (width или height ) или для элемента задано абсолютное позиционирование (position : absolute ).

Также учтите, что прозрачность действует на всё содержимое слоя, включая дочерние элементы, и увеличить для них уровень непрозрачности за счет варьирования opacity не получится. В примере 1, где прозрачность слоя установлена как 0.7 , текст внутри слоя получает такое же значение. Его допустимо установить меньше, но превысить значение прозрачности 0.7 текст уже не может.

Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространении в разных операционных системах, потому что смотрится стильно и красиво. В веб-дизайне полупрозрачность также применяется и достигается за счёт свойства opacity или формата цвета RGBA, который задаётся для фона.

Свойство opacity

Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными и увеличить уровень прозрачности, добавляя , не получится. В табл. 1 показан вид текста и фона с разными значениями opacity .

В примере 1 показано создание полупрозрачного блока с использованием opacity .

Пример 1. Фон на веб-странице

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba , затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..

Рис. 1. Синтаксис применения rgba

В примере 2 показано применение формата RGBA для создания полупрозрачного фона.

Пример 2. Полупрозрачный фон

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.

Рис. 2. Полупрозрачный фон и непрозрачный текст

В CSS есть три способа изменить прозрачность элемента:
с помощью свойства opacity ,
с помощью функции rgba() ,
с помощью функции hsla() .

1. Свойство opacity

Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity , содержит внутри себя другие элементы, то они также изменят свою прозрачность.
Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:

H1 {color: #CD6829;} div { background: #CDD6DB; opacity: .3; }
Рис. 1. Прозрачность элементов с помощью opacity

2. Функция rgba()

Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red) , зеленого (Green) и синего (Blue) цветов, а альфа-канал (Alpha) отвечает за степень прозрачности цвета. В отличие от свойства opacity , для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.

3. Функция hsla()

Функция hsla() , параметры которой означают тон (Hue) , насыщенность (Saturation) , яркость (Lightness) и альфа-канал (Alpha) , также позволяет задать полупрозрачный цвет.

Оттенки цвета задаются в процентах, используя соответствующее значение из цветового круга. Сам круг разбит на сектора, на границах которых находятся основные цвета:

0/360° — красный цвет
60° — желтый цвет
120° — зеленый цвет
180° — голубой цвет
240° — синий цвет
270° — фиолетовый цвет
300° — пурпурный цвет .