Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)

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

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

Рассмотрим полупрозрачность текста и фона - как правильно ее использовать в дизайне сайта:

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

HTML 5 CSS 3 IE 9

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

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

Полупрозрачный фон HTML 5 CSS 3 IE 9

Значение непрозрачности для фона установлено 90% - полупрозрачный фон и непрозрачный текст.

Свойство CSS 3 opacity позволяет делать прозрачным тот или иной элемент сайта.

Степень прозрачности элемента определяется значением от 0 до 1 где 0 – полностью прозрачный а 1 – непрозрачный вовсе.. Так например значение 0.5 свойства opacity применённого к картинке будет значить что данное изображение должно быть полупрозрачным.

Прозрачность в IE

Браузер Internet Explorer не поддерживает свойства opacity вплоть до девятой версии, однако имеет свой собственный фильтр с помощью которого можно задать степень прозрачности:

filter: alpha(opacity=50)

Значение opacity для фильтра браузера Internet Explorer может варьироваться от 0 - полностью прозрачный до 100 - непрозрачный

Блоки этого меню при наведении курсора будут полупрозрачными и в IE!!

Главная
Карта сайта
Купить слона
Продать слона
Взять слона на прокат

Префиксы.

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

Итак, вендорные префиксы это особые приставки к свойствам CSS используемые браузерами для экспериментальных свойств которые официально не входят в спецификацию CSS.

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

Почему на свой страх и риск? Да потому что есть вероятность, что когда будет официально утверждена спецификация CSS 3 описанные в ней свойства по своему действию будут отличатся от свойств с таким же именем которые уже используются браузерами. Ну вот взбрендит допустим разработчикам спецификации CSS 3 обозначить свойство opacity не как степень прозрачности блока, а например как его штриховку или мерцание (бред конечно пишу), что тогда будут отображать уже миллионы установленных браузеров для которых opacity это именно прозрачность!?

Или допустим, разработчики браузера придумали своё собственное свойство – нововведение, которого вообще нигде и ни у кого нет, но документ с таким свойством не проходит проверку на валидность потому что такого свойства в спецификации нет.

По этим и другим причинам браузеры используют префиксы вначале свойств, которые не входят в официальную спецификацию. У каждого браузера свой префикс начинающийся со знака «-» данный знак вначале свойства, как впрочем и этот знак «_», согласно спецификации CSS 2.1 обозначает что свойство зарезервировано для CSS расширений тех или иных браузеров.

Вот наиболее популярные браузеры и их префиксы:

Браузер	Префикс
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 и выше	-ms-
Safari до версии 3, Konqueror	-khtml-
Safari 3 и выше, Google Chrome	-webkit-

Использовать префиксы очень легко достаточно взять какое либо свойство CSS и подставить к нему нужный префикс, например к свойству opacity подставляем -moz- получается: -moz-opacity

Хотя на самом деле моё выражение «использовать префиксы » неверно! на самом деле ничего никуда не подставляется, просто есть свойство opacity , а есть -moz-opacity и это два разных свойства которые необязательно должны выполнять одну и ту же функцию!! - это следует понимать..

А ещё следует понимать, что те или иные конкретные браузеры до определённых версий могут поддерживать CSS свойства только со своими префиксами (опять неправильно выражаюсь, правильно говорить свои собственные свойства - браузерные CSS расширения), а могут изначально полагаться на пусть даже разрабатываемые спецификации. – Каждый конкретный случай в этом учебнике мы будем рассматривать отдельно.

Что же касается этой главы про прозрачность, то следует отметить, что браузер Firefox 3.5 и его более ранние версии используют своё собственное свойство -moz-opacity , а браузер Safari до версии 1.1 использует своё свойство -khtml-opacity .

Так для того чтобы сделать наш пример полностью кроссбраузерным нам понадобится добавить в код ещё пару строк:

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

Ну а теперь полезные советы..

Всегда используйте префиксы (ну если конечно тот или иной браузер не может обойтись без них) в тех случаях, когда используемое свойство может сильно повлиять на работоспособность, читабельность и юзабилити сайта. Одно дело когда не будут работать какие либо мелочи в дизайне сайта и совсем другое когда, например не работает меню сайта или на сайте невозможно прочитать текст из-за того что браузер не поддерживает какое-то свойство а вместо него использует аналогичное своё собственное.

Влад Мержевич

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

Блок с градиентом

Сделайте блок, показанный на рис. 1. Блок содержит полупрозрачную градиентную рамку с градиентным фоном под заголовком и небольшим указателем. Фон на странице приведён лишь для наглядности эффекта полупрозрачности, вы можете указать любую свою картинку. Минимальная высота блока составляет 100px.

Как сделать слой полупрозрачным?

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

Полупрозрачный фон

Влад Мержевич

Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity . Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятная оборотная сторона. Сделаю небольшой обзор, чтобы стало понятно, о чем идет речь, а также для тех читателей, которые не знакомы с нетрадиционными вариантами создания эффекта полупрозрачности.

Как установить таблицу полупрозрачной, а часть ячеек нет?

Для изменения прозрачности элемента в CSS3 предусмотрено свойство opacity , его значение может меняться от 0 до 1. Ноль соответствует полной прозрачности элемента, а единица, наоборот, непрозрачности. Современные браузеры вполне корректно работают с этим свойством за исключением браузера Internet Explorer, поэтому для него приходится использовать специальное свойство filter со значением alpha(Opacity=X) , где X может меняться от 0 до 100.

В 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() изменит прозрачность только блока.

Рис. 2. Цветовая модель RGB h1 {color: #CD6829;} div {background: rgba(205, 214, 219, 0.3);}
Рис. 3. Прозрачность элементов с помощью функции rgba()

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

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

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

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

Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1) . Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1) , а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1) .

Для управления прозрачностью элементов страницы используется свойство CSS opacity. По спецификации оно применимо к узлам любого типа и поддерживается во всех современных браузерах. С его помощью можно создать интересный дизайн или реализовать удобное интерактивное взаимодействие с пользователем.

Возможные значения

Синтаксис свойства opacity в css выглядит так:

Selector { opacity: 1; } selector { opacity: 0; } selector { opacity: 0.4; }

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

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

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

Прозрачность дочерних узлов

Однако если элемент имеет родителя, прозрачность которого отличается от единицы, вычисление изменяется. Потомок не может быть "менее прозрачным", чем любой из его предков. Значение CSS-свойства opacity родительского блока становится верхним пределом прозрачности дочернего узла.

Parent { opacity: 0.7; } child { opacity: 1; }

В подобной ситуации элемент child будет на 30 % прозрачным, несмотря на то что значение opacity равно единице.

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

Пример 1. Полупрозрачность. Необходимо, чтобы под элементом target был виден основной фон блока.

Target { background: black; opacity: 0.5; }

Полупрозрачным становится не только фон блока target, но и текст.

Пример 2. Динамическое управление прозрачностью. Значение свойства CSS opacity блока target изменяется при наведении на него курсора.

Target { opacity: 0.2; } .target:hover { opacity: 1; }

Динамическая прозрачность

Последний пример демонстрирует, что прозрачные элементы продолжают реагировать на события страницы, такие как наведение курсора. Это позволяет использовать javascript для управления свойством CSS opacity, а также применять механизмы transition и animation для плавного изменения режима отображения.

Чтобы получить доступ к прозрачности из скрипта, нужно обратиться к объекту style конкретного элемента.

// получение текущего значения прозрачности var opacity = element.style.opacity; // установка нового значения element.style.opacity = 0.4;

Плавное исчезновение блока можно реализовать с помощью CSS-свойства transition:

Element { opacity: 0.1; transition: opacity 1000ms; } element:hover { opacity: 0.8; transition: opacity 2000ms; }

Теперь узел element при наведении мышки будет изменять прозрачность от 10 до 80 % в течение одной секунды, а при уходе курсора - тускнеть до исходного значения в течение двух секунд.

Свойство CSS opacity в сочетании с механизмом transition позволяет создавать красивые эффекты.

Альфа-канал вместо opacity

Главные тонкости механизма opacity в CSS:

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

Если эти эффекты осложняют жизнь верстальщика, вместо opacity следует использовать просто прозрачный фон, определив его значение в формате RGBA или HSLA.