Прозрачный css. Как сделать слой полупрозрачным? Как сделать элемент прозрачным и убрать прозрачность 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 текст уже не может.

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

Img1 { opacity: 0.2; } .img2 { opacity: 0.5; } .img3 { opacity: 1.0; }

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

Старые 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.

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

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

Img1 { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }/* синтаксис IE5.5+ (является предпочтительным) */ .img2 { filter: alpha(opacity=50); } /* синтаксис IE4 */ Для установки прозрачности через скрипт используем: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(строка параметров)"

Для получения прозрачности аналогичной прозрачности W3C используем в качестве строки параметров значение "opacity=число от 0 до 100".

Как сделать, чтобы работало во всех браузерах:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

Javascript

function setElementOpacity(sElemId, nOpacity) { var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Если не существует элемент с указанным id или браузер не поддерживает ни один из известных функции способов управления прозрачностью if (opacityProp=="filter") // Internet Exploder 5.5+ { nOpacity *= 100; // Если уже установлена прозрачность, то меняем её через коллекцию filters, иначе добавляем прозрачность через style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // Для того чтобы не затереть другие фильтры используем "+=" } else // Другие браузеры elem.style = nOpacity; } function getOpacityProperty() { if (typeof document.body.style.opacity == "string") // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 и младше, Firefox 0.8 return "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ return "filter"; return false; //нет прозрачности }

Доброго времени суток, гики веб-разработки, а также ее новички. Для тех, кто не следит за трендами 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 Пример 1

Пример 1

Текст на рисунке в формате 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 Пример 2

Пример 2

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

Способ 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 Пример 3
В нашем магазине вы найдете все виды цветов.

Пример 3

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

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

На этом публикация подошла к концу. Подписывайтесь на мой блог и не забывайте приглашать друзей. Желаю удачи в изучении веб-языков! Пока-пока!

Описание

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

Синтаксис

opacity: значение

Значения

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

opacity

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

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

Браузеры

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

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



СХОЖИЕ СТАТЬИ