Для управления прозрачностью элементов страницы используется свойство 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.

Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.

Как задать прозрачность?

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

• Свойство opacity .
• Использование PNG -картинки
• Формат системы RGBA
• Ну, и наконец, древность или клетчатые изображения.

CSS свойство Opacity

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

< html> < head> < title> TODO supply a title < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " > Тут будет много Вашего текста

/* Фон для тела страницы */ } . prozrachen { padding: 10px; /*Отступы для текста*/ background: darkturquoise; /* Задаем цвет фона */ margin: 0 auto; /* Центрируем блок */ width: 50 %; /* Задаем ширину блока */ opacity: 0.7 ; /* Задаем прозрачность */ font: 48px/ 64px Times New Roman; text- align: justify; }

В результате мы получили полупрозрачный блок:

Важно!!!

1. Opacity принимает значения из диапазона: 0 (полная прозрачность) – 1 (непрозрачность).
2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:

   filter: alpha(Opacity= 70 ) ;

   Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:

   • с абсолютным позиционированием (position: absolute )
   • с фиксированным линейным размером (height или width ).
3. Степень прозрачности наследуется дочерними элементами, при чем дочернему элементу можно увеличить прозрачность, но сделать меньше – нельзя. Т. е. на полупрозрачном фоне НЕ ПРОЗРАЧНОГО текста не сделать.

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

color: white;

и рассмотрим его под микроскопом:

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Использование PNG -картинки

Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

Важно!!!

1. В отличии от свойства opacity прозрачность задается только для фона
2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6 . Если вы оптимизируете свой сайт под такую древность – придется применять другие методы или скрипты.
3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA .

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha -канала, характеризующего степень прозрачности.

background: rgba(r, g, b, a) ;

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

body { background: url(./ vaden- pro- logo. png) ; /* Фоновый рисунок */ } . prozrachen { padding: 10px; background: rgba(0 , 206 , 209 , 0.7 ) ; margin: 0 auto; width: 50 %; font: 48px/ 64px Times New Roman; color: white; text- align: justify; }

Важно!!!

1. В отличии от свойства opacity прозрачность задается только фону
2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba .
3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9 , Op10 , Fx3 ,Sf3.2 ).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity , png методы.

Клетчатые изображения, или с уважением к истории

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

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

Важно!!!

1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
2. В остальном особенности применения аналогичны с методом «PNG -картинки».

Подытожим?

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

Свойство CSS opacity отвечает за прозрачность элементов (картинки, текста, блоки) в html.

Синтаксис CSS opacity

Где value может принимать вещественные значения в диапазоне от 0.0 до 1.0. Значение 1.0 — означает, что прозрачность отсутствует (по умолчанию).

Пример №1. Прозрачное изображение в html

Первая картинка выведена без прозрачности, вторая с прозрачностью 0.5

Полупрозрачность элемента

Делаем изображение полупрозрачным при наведении!

ДемонстрацияСкачать исходники

Спасибо за внимание!

Следующая статья
Как создать div блок с прокруткой?

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

Краткая информация

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

В качестве значения выступает число из диапазона . Значение 0 соответствует полной прозрачности элемента, 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6 .

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div { opacity: 1 ; }

Пример

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

Рис. 1. Результат использования opacity

Объектная модель

Объект .style.opacity

Примечание

Firefox до версии 3.5 поддерживает свойство -moz-opacity .

Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter : alpha(opacity=50) , где параметр opacity может принимать значение от 0 до 100.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

×

Доброго времени суток, гики веб-разработки, а также ее новички. Для тех, кто не следит за трендами IT-области, а точнее за веб-модой, я хочу торжественно сообщить, что эта публикация на тему: «Как сделать прозрачный блок css инструментами» вам как раз кстати. Ведь в текущем 2016 году внедрение в онлайн-сервисы различных прозрачных объектов считается стильным ходом.

Поэтому в этой статье я расскажу вам о всех существующих способах создания прозрачности, начиная от допотопных решений, сделаю акценты на совместимости решений с браузерами, а также приведу конкретные примеры программного кода. А теперь за работу!

Способ 1. Допотопный

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

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

Способ 2. Не замороченный

В редких случаях разработчики решают проблему с внедрением полупрозрачной картинки путем вставки…уже готовой полупрозрачной картинки! Для этого используются изображения, сохраненные в формате PNG-24. Данный графический формат позволяет задавать 256 уровней полупрозрачности.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Текст на рисунке в формате png.

Однако такой способ не удобен по нескольким причинам:

1. Internet Explorer 6 не работает с такой технологией, для него нужно писать скриптовый код;
2. Нельзя видоизменять цвета фона в css;
3. Если в браузере отключена функция отображения изображений, то исчезнет.

Способ 3. Пропиаренный

Наиболее распространенный и всем известный способ сделать какой-либо блок прозрачным является свойство opacity .

Значение параметра варьируется в диапазоне , где при 0 объект невидим, а при 1 – отображается полноценно. Однако и здесь есть некие неприятные моменты.

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

Во-вторых, Internet Explorer опять «воротит носом» и вплоть до 8 версии не функционирует с opacity .

Для решения этой проблемы используется filter: alpha (Opacity=значение) .

Рассмотрим пример.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

В нашем магазине вы найдете все виды цветов.

Способ 4. Современный

На сегодняшний день профессионалы пользуются инструментом rgba (r, g, b, a).

До этого я рассказывал, что RGB – это одна из популярных цветовых моделей, где R отвечает за все оттенки красного, G – оттенки зеленого и B – оттенки синего.

В случае с параметром css переменная A отвечает за альфа-канал, который в свою очередь отвечает за прозрачность.

Главное преимущество последнего способа – альфа-канал не затрагивает объекты, находящиеся внутри стилизованного блока.

rgba (r, g, b, a) поддерживается начиная с:

• 10 версии Opera;
• Internet Explorer 9;
• Safari 3.2;
• 3 версии Firefox.

Хочу отметить интересный факт! Горячо любимый Internet Explorer 7 выдает ошибку при сочетании свойства background-color с названием цветов (background-color: gold). Поэтому стоит использовать только:

background-color: rgba (255, 215, 0, 0.15)

А теперь пример.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

В нашем магазине вы найдете все виды цветов.

В нашем магазине вы найдете все виды цветов.

Обратите внимание, что текстовый контент блока полностью виден (100% черный), в то время как фону задан альфа-канал равный 0,88, т.е. 88%.

Поделись статьей:

Похожие статьи

17 апреля 2015
Лучшие смартфоны Fly Аппаратная платформа: процессор, память, быстродействие

17 апреля 2015
Соляная лампа «Каменный цветок

17 апреля 2015
Продуктивные способы потратить время в интернете

17 апреля 2015
Как установить приложение плей маркет на ноутбук