Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA). Прозрачность с помощью CSS Css прозрачность слоя

Описание

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

Синтаксис

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.

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; //нет прозрачности }

Чииииикс!

Я вот что подумал, а не написать ли мне о свойстве прозрачности для 3-го CSS? Да, сейчас полетит куча реплик в мою сторону, что об этом свойстве все уже знают! Ха, а нет! Уверен, далеко не все.

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

И так, вернемся к свойству "opacity ", которое дает интересный эффект, без вмешательства графики, всего-лишь прописав 1 строчку кода.

Что такое "opacity" в CSS 3?

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

У меня в блоге есть несколько элементов, которым прописано это свойство. Вы можете увидеть живой пример, когда опуститесь в самый низ сайдбара, там есть раздел "Друзья ". Рисунок тускловат, правда? А теперь наведите курсор мышки на него. Стал более четче, не так ли?)

Сейчас расскажу поподробней, как это у меня реализовано.

Нам нужно задать прозрачность для элемента по умолчанию. То есть, элемент будет выглядеть немного тускловатый. Я поставил непрозрачность 70%. Но так, как все браузеры понимают код по-разному, нам нужно написать универсальный код.

Для Firefox , Opera , Chrome пишем:

Opacity:X;

где "X " - значение в диапазоне от 0.0 1.0 (непрозрачность элемента).

Для Internet Explorer (поддерживает 8 и 9 версии):

Filter:alpha(opacity=X);

где "X " - значение в диапазоне от 0 (полная прозрачность элемента) до 100 (непрозрачность элемента).

Myimage { opacity:0.7; filter:alpha(opacity=70); }

А теперь зададим правила для элемента, когда на него будет наведен курсор мыши. Нам нужно увидеть четкое отображение элемента и для этого я поставил 100% непрозрачность, то есть, элемент выглядит таким, каким он есть на самом деле:

Myimage:hover { opacity:1.0; filter:alpha(opacity=100); }

Вот парочка примеров:

Прозрачность фотографии 100 (1.0), то есть нету прозрачности


Прозрачность фотографии 70 (0.7). Разноцветные круги - это "пробивается" картинка, которая расположена на фоне, т.е. под фотографией

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

Синтаксис CSS opacity

opacity : value ;

Где 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 нужно писать следующую конструкцию:

object.style.opacity ="VALUE "

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

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