Opacity css internet explorer

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

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

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

Старый подход

В старых версиях Firefox и Safari необходимо применять свойство следующим образом:

Свойство -khtml-opacity использовалось в старых версиях webkit-браузеров. Это свойство устарело и больше не нужно, кроме случаев когда вы уверены, что значительная часть трафика вашего сайта исходит от посетителей, использующих Safari 1.x, что, конечно, маловероятно.

В следующей строке используется свойство -moz-opacity, которое работало на очень ранних версиях движка Mozilla. Firefox прекратил его поддержку в версии 0.9.

CSS прозрачность в Firefox, Safari, Chrome и Opera

Для большинства современных браузеров достаточно использовать следующее свойство:

В приведённом примере, элементу устанавливается значение непрозрачности 70% (30% прозрачности). То есть если мы установим значение в единицу, то элемент будет непрозрачным, и, соответственно, установка этого значения в ноль, сделает его невидимым.

Свойством opacity обрабатывается 2 десятичных цифры. То есть значение «.01» будет отличаться от значения «.02», хоть это и мало заметно.

CSS прозрачность для Internet Explorer

Как обычно, Internet Explorer не дружит с остальными браузерами. К тому же у нас сейчас в довольно широком использовании три версии этого браузера, установка прозрачности в каждой из которых различна и иногда требует дополнительных усилий для получения положительного результата.

В этом примере используется свойство filter, которое работает в версиях 6-8, однако для версий 6 и 7 есть одно ограничение: у элемента свойство hasLayout должно быть установлено в true. Это свойство присутствует только в IE и подробнее о нём можно почитать, например, на Хабре.

Ещё один способ установить прозрачность используя CSS в IE8 — это использовать следующий подход (обратите внимание на комментарии):

Первая строка будет работать во всех сейчас используемых версиях, вторая же — только в IE8. Обратите внимание, что во второй строке используется префикс -ms-, а значение взято в кавычки.

Установка и изменение CSS прозрачности с помощью JavaScript или jQuery

Вы можете использовать следующий код для установки прозрачности:

document.getElementById("myElement").style.opacity = ".4"; // для большинства браузеров document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // для IE

Конечно же, в этом случае гораздо проще использовать jQuery, кроме того, работать будет во всех браузерах:

$("#myElement").css(< opacity: .4 >); // работает во всех браузерах

Вы можете анимировать это свойство:

$("#myElement").animate(< opacity: .4 >, 1000, function() < // Анимация завершена; этот код работает во всех браузерах. >);

Функция RGBA

В CSS3 планируется поддержка альфа-канала с помощью функции rgba. Эта функция работает в Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Используется она так:

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

Функция HSLA

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

Подробнее об этой функции можно почитать на сайте W3.org.

Важный момент при использовании функций rgba и hsla — это то, что установка прозрачности не применяется к дочерним элементам, тогда как использование свойства opacity — наследуется.

Источник

opacity

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

Интерактивный пример

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

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

Синтаксис

Значения

: число в пределах от 0.0 до 1.0 , включительно, или проценты в пределах от 0% до 100% , включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне.	Значение	Действие
0	Элемент полностью прозрачен (он становится невидимым).
Любое число строго между 0 и 1	Элемент полупрозрачный (т.е. содержимое элемента можно увидеть).
1 (значение по умолчанию)	Элемент полностью непрозрачный (видимый).

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

Примеры

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

div  background-color: yellow; > .light  opacity: 0.2; /* Едва видимый текст на фоне */ > .medium  opacity: 0.5; /* Видимость текста более чёткая на фоне */ > .heavy  opacity: 0.9; /* Видимость текста очень чёткая на фоне */ >

div class="light">You can barely see this.div> div class="medium">This is easier to see.div> div class="heavy">This is very easy to see.div>

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

img.opacity  opacity: 1; filter: alpha(opacity=100); /* IE8 и ниже */ zoom: 1; /* Триггеры "hasLayout" в IE 7 и ниже */ > img.opacity:hover  opacity: 0.5; filter: alpha(opacity=50); zoom: 1; >

img src="https://developer.mozilla.org/mdn-social-share.png" alt="MDN logo" width="128" height="146" class="opacity">

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

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

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

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

Начальное значение	1
Применяется к	все элементы
Наследуется	нет
Проценты	map to the range [0,1]
Обработка значения	Тоже, что и указанное значение, после обрезки number до диапозона [0.0, 1.0].
Animation type	by computed value type

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 31 мая 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью.

Opacity в Firefox, Safari, Chrome, Opera и IE9

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

Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%).

Свойство opacity принимает значение от 0.0 до 1.0 . Настройка opacity: 1; сделает элемент полностью непрозрачным (то есть 0% прозрачным), тогда как opacity: 0; сделает элемент полностью прозрачным (то есть 100% прозрачным).

Opacity в Internet Explorer 8 и ниже

Internet Explorer 8 и более ранняя версия поддерживает только свойство Microsoft «alpha filter» для контроля прозрачности элемента.

Альфа-фильтры в IE принимают значения от 0 до 100 . Значение 0 делает элемент полностью прозрачным (т.е. 100% прозрачным), тогда как значение 100 делает элемент полностью непрозрачным (то есть 0% прозрачным).

Opacity в разных браузерах

Комбинируя оба вышеуказанных шага, вы получите прозрачность для всех браузеров.

Включение alpha filter для управления прозрачностью в Internet Explorer 8 и более ранних версиях создает недопустимый код в таблице стилей, поскольку это свойство только для Microsoft, а не стандартное свойство CSS.

Opacity для изображений

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

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

Изменение opacity при наведении мыши

В следующем примере демонстрируется распространенное использование непрозрачности изображения CSS — когда непрозрачность изображений изменяется при наведении указателя мыши на изображение.

Наведите указатель мыши на изображения, чтобы увидеть эффект.

Текст в прозрачном поле

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

OPACITY

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

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

В дополнение к RGB CSS3 представил новый способ — RGBA (Red Blue Green Alpha) для указания цвета, который включает альфа-прозрачность как часть значения цвета.

Указание цвета в формате RGBA — это очень простой способ установить прозрачность.

Первые три числа, представляют цвет в значениях RGB, т.е. красный (0-255), зеленый (0-255), синий (0-255), а четвертое, представляет значение альфа-прозрачности в диапазоне от 0.0 до 1.0 ( 0 делает цвет полностью прозрачным, тогда как значение 1 делает его полностью непрозрачным).

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

Или измените только прозрачность фона.

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

Прозрачность RGBA не влияет на дочерние элементы, как свойство opacity . Альфа-значение RGBA влияет на прозрачность отдельных значений цвета, а не всего элемента.

Объявление запасного цвета

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

Internet Explorer 8 и более ранние версии не поддерживают цвета RGBA. Они используют gradient filter для достижения эффекта RGBA, использование которого не рекомендуется.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Руководство по фильтрам в CSS3

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

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Источник

Opacity css internet explorer