Css — Свойство opacity и цвет


Содержание

CSS прозрачность (css opacity, javascript opacity)

Эффект прозрачности — это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим. Вдобавок рассмотрим готовое решение постепенного изменения прозрачности с помощью javascript.

CSS opacity (CSS прозрачность)

W3C в своей рекомендации CSS3 определяет свойство opacity для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.

Пример (задана прозрачность 0.2, 0.5 и 1.0):

Нравится? Да? Так что самое время подпортить настроение. Понятное дело, что разные браузеры по-разному реализуют данное свойство: кто вообще не реализует, кто реализует, используя свое собственное название для данного свойства, а кто фильтры использует.

Браузеры поддерживающие CSS3 opacity

Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.

Для установки прозрачности через скрипт используем: object.style.opacity

Mozilla 1.6 и ниже, Firefox 0.8

Старые Mozilla и Firefox 0.8 используют своё название данного свойства: -moz-opacity

Для установки прозрачности через скрипт используем: object.style.MozOpacity

Safari 1.1, Konqueror 3.1

Данные товарищи, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity

Для установки прозрачности через скрипт используем: object.style.KhtmlOpacity

Однако, имейте ввиду, что данное свойство доступно лишь в данных версиях этих браузеров. Safari с версии 1.2 использует CSS3 opacity, но при этом Konqueror старше версии 3.1, перестав поддерживать -khtml-opacity, не ввел поддержку CSS3 opacity.

В январе 2003 года корпорация Apple представила новый браузер для Mac OS X, основанный на движке KHTML, Safari. Благодаря лицензии, на условиях которой распространяется KHTML, все изменения, вносимые в него разработчиками Apple, публикуются в виде патчей, которые, после пересмотра, добавляются в основную ветку KHTML.

Причиной по которой Konqueror утратил возможность реализации эффекта прозрачности как раз и заключается во внесение в ядро KHTML патчей от Safari, т.к. Safari использует возможности присутствующие в Mac OS X, но которых нет в KDE.

Конечно рано или поздно эта ситуация будет исправлена, но на данный момент в последней версии 3.5 ситуация остается прежней.

Internet Explorer 5.5+

Данный браузер, начиная с версии 5.5 и включая последнюю на сегодняшний день версию Internet Explorer 7, реализует прозрачность через Alpha DirectX фильтр. Стоит отметить, что данный фильтр использует значение прозрачности в диапазоне от 0 до 100 (а не от 0.0 до 1.0). Так же отмечу, что фильтр можно применять лишь к элементу с установленным свойством height, или width, или position со значением absolute, или writingMode со значением tb-rl, или с contentEditable установленным в true.

Пример (устанавливаем прозрачность на половину):

Для установки прозрачности через скрипт используем: object.style.filter = «prog >

CSS opacity симбиоз

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

По сути, нужными являются первое и последнее правила, для IE5.5+ и браузеров понимающих CSS3 opacity, а два правила по середине явно погоды не делают, но и не очень то и мешают (сами решайте, нужны ли они вам).

Javascript opacity симбиоз

Теперь попробуем установить прозрачность через скрипт с учетом особенностей разных браузеров описанных выше.

Функция принимает два аргумента: sElemId — id элемента, nOpacity — вещественное число от 0.0 до 1.0 задающее прозрачность в стиле CSS3 opacity.

Думаю, что стоит пояснить часть кода функции setElementOpacity относящуюся к IE.

Может возникнуть вопрос, а почему бы ни устанавливать прозрачность путем присваивания (=) свойству elem.style.filter = ‘. ‘; ? Зачем используется «+=» для добавления в конец строки свойства filter ? Ответ прост, для того чтобы не «затереть» другие фильтры. Но при этом, если добавить фильтр таким образом второй раз, то он не изменит ранее установленные значения этого фильтра, а будет просто добавлен в конец строки свойства, что не корректно. Поэтому, если фильтр уже установлен, то нужно им манипулировать через коллекцию примененных к элементу фильтров: elem.filters (но учтите, если фильтр ещё не был назначен элементу, то управлять им через данную коллекцию невозможно). Доступ к элементам коллекции возможен либо по имени фильтра, либо по индексу. Однако фильтр может быть задан в двух стилях, в коротком стиле IE4, или в стиле IE5.5+, что и учтено в коде.

Цукерберг рекомендует:  Формирование сообщений с использованием CSS3 и jQuery

Плавное изменение прозрачности элемента

Готовое решение. Используем библиотеку opacity.js

Основные шаги:

  1. Подключаем библиотеку функций;
  2. Определяем правила используя метод fadeOpacity.addRule();
  3. Вызываем метод fadeOpacity() для изменения прозрачности от начального значения к конечному, или fadeOpacity.back() для возврата к начальному значению уровня прозрачности.

Разжевываем

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

Правила определяются с помощью метода fadeOpacity.addRule

Синтаксис: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Аргументы:

  • sRuleName — имя правила, задаётся произвольно;
  • nStartOpacity и nFinishOpacity — начальная и конечная прозрачность, числа в диапазоне от 0.0 до 1.0 ;
  • nDelay — задержка в миллисекундах (необязательный аргумент, по умолчанию равен 30).

Сам вызов фейдинга прозрачности делаем через методы fadeOpacity(sElemId, sRuleName), где sElemId это id элемента, а sRuleName имя правила. Для возврата прозрачности в исходное состояние используется метод fadeOpacity.back(sElemId).

:hover для простой смены прозрачности

Ещё отмечу, что для простой смены прозрачности (но не постепенного её изменения) в самый раз подходит псевдо-селектор :hover, который позволяет определить стили для элемента, в момент наведения на него мыши.

Обратите внимание, что картинка размещена внутри элемента A. Дело в том, что Internet Explorer вплоть до версии 6, понимает псевдо-селектор :hover, только применительно к ссылкам, а не к любым элементам, как положено в CSS (в IE7 положение исправлено).

Прозрачность и зазубренный текст в IE

С выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType, а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания. Касательно нашего случая, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст — bold, например, двоится, могут так же появляться различные артефакты, например, в виде чёрточек, зазубренного текста). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color, элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.

Прозрачность родительского и дочерних элементов. Как ограничить распространение свойства?

В CSS прозрачность элемнта-родителя передается дочерним элементам: если некоторый элемент на странице имеет свойство opacity=.5, то даже при явно заданном opacity=1 дочерние элементы будут полупрозрачными.

Решение — сделать непрозрачный родительский элемент, при этом один из дочерних элементов становится псевдо-родителем. Именно ему задается свойство полупрозрачности. Соответственно, свойство не будет распространяться на другие вложенные элементы.

Есть ли варианты ограничить распространение свойство родителя на дочерние элементы без создания псевдо-родителя?

UPD. Нашлось еще одно решение — использовать псевдолементы (см. ответ ниже).

СSS3 Свойство opacity

Пример

Установить уровень непрозрачности для элемента

Определение и использование

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

Уровень непрозрачности описывает уровень прозрачности, где 1 не является прозрачным вообще, 0.5 является 50% прозрачным, а 0 является полностью прозрачным.

Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы также становятся прозрачными. Это может сделать текст, внутри полностью прозрачного элемента, трудно читаемым. Если вы не хотите применять непрозрачность к дочерним элементам, используйте вместо этого значения цвета RGBA (см. «Дополнительные примеры» ниже).

Значение по умолчанию: 1
Унаследованный: нет
Анимируемый: да, см. раздел отдельные свойства. Прочитайте о animatable Попробовать
Версия: CSS3
JavaScript синтаксис: object.style.opacity=»0.5″ Попробовать

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
opacity 4.0 9.0 2.0 3.1 9.0

Примечание: IE8 и более ранние версии поддерживают альтернативу, свойство filter. Например: filter:Alpha(opacity=50).

CSS Синтаксис

Значение свойств


Значение Описание Воспроизвести
number Задает непрозрачность. От 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный) Воспроизвести »
initial Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial Воспроизвести »
inherit Наследует это свойство от родительского элемента. Прочитайте о inherit

Примеры

Пример

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

Пример

Чтобы не применять непрозрачность к дочерним элементам (как в примере выше), используйте вместо этого значения цвета RGBA. В следующем примере устанавливается непрозрачность для цвета фона, но не для текста:

div.first <
background: rgba(76, 175, 80, 0.1);
>

div.second <
background: rgba(76, 175, 80, 0.3);
>

div.third <
background: rgba(76, 175, 80, 0.6);
>

Совет: Узнать больше о цветах RGB в CSS RGBA Цвета.

Пример

Как использовать JavaScript для изменения непрозрачности элемента:

Непрозрачность

На этой странице

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

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

Использование opacity со значением, отличным от 1 , помещает элемент в новый контекст наложения.

Синтаксис

Значения

— тип хранения данных в CSS представляющий собой число: либо целое, либо с дробной частью.»> number в пределах от 0.0 до 1.0 , включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне.

Цукерберг рекомендует:  Что такое вертикальное выравнивание
Значение Действие
Элемент полностью прозрачен (он становится невидимым).
Любое — тип хранения данных в CSS представляющий собой число: либо целое, либо с дробной частью.»> number строго между 0 aи 1 Элемент полупрозрачный (т.е. содержимое элемента можно увидеть).
1 (значение по умолчанию) Элемент полностью непрозрачный (видимый).

Формальный синтаксис

Примеры

Базовый пример

Различная непрозрачность с :hover

Проблемы доступности

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

Коэффициент цветовой контрастности определяется путем сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.

Свойство CSS opacity

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

Синтаксис CSS opacity

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

Примеры: как прозрачность в html

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

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

На странице преобразуется в следующее

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

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

На странице преобразуется в следующее

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

Для обращения к opacity из JavaScript нужно писать следующую конструкцию:

Свойство CSS opacity: управление прозрачностью

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

opacity

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


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

Значение по умолчанию 1
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис ?

Обозначения

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

×

Значения

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

Песочница

Пример

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

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

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

Примечание

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

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

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

Спецификация Статус
CSS Transitions Рабочий проект
CSS Color Module Level 3 Рекомендация

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

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

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

×

Браузеры ?

9 12 1 9 1.2 1 3.5

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

opacity

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

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства opacity является число от 0 до 1 указывающее уровень прозрачности, где 0 — полная прозрачность, 1 — полная непрозрачность, 0.5 — соответствует прозрачности наполовину.

Процентная запись: не существует.

Значение по умолчанию: 1.

Синтаксис

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

Результат. Использование свойства CSS opacity.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Нет Нет Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: До 9.0 9.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Нет Да Да Да Да Да

В браузере Internet Explorer можно изменить уровень прозрачности с помощью фильтра:

-filter: prog > Здесь opacity=80 — это уровень прозрачности, который можно изменять в диапазоне от 0-100. Причем, чтобы этот фильтр работал в IE 6.0 и 7.0 элементу необходимо задать ширину (w >zoom: 1 , где цифра 1 означает натуральный размер элемента (2 — увеличение в два раза, 3 — в три и т.д.). Это свойство понимает только IE.

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

Средствами CSS можно задать прозрачность двумя способами.С помощью свойства opacity или свойства rgba.

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

Синтаксис

Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).

К примеру нам надо, чтобы наша картинка была на половину прозрачной

HTML

CSS

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

filter:prog >CSS

Так же на IE может не работать если не указаны width(ширина) или height(высота).

RGBA

Свойство RGBA позволяет задать фоновый цвет с альфа-каналом. Альфа-канал определяет прозрачность элемента.

Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Синтаксис

Допустим, нам нужен текст с прозрачным фоном.

HTML

CSS

Отличия opacity от rgba

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

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

Прозрачный слой css. Свойство CSS opacity: управление прозрачностью

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

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

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

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

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

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

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

Цукерберг рекомендует:  Java - как реализовать уведомления на экране блокировки
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих