Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA). Прозрачность с помощью CSS Css прозрачность слоя
Описание
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
opacity: значение
Значения
В качестве значения выступает число из диапазона . Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6 .
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 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 |
|
Однако такой способ не удобен по нескольким причинам:
- Internet Explorer 6 не работает с такой технологией, для него нужно писать скриптовый код;
- Нельзя видоизменять цвета фона в css;
- Если в браузере отключена функция отображения изображений, то исчезнет.
Способ 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%.
На этом публикация подошла к концу. Подписывайтесь на мой блог и не забывайте приглашать друзей. Желаю удачи в изучении веб-языков! Пока-пока!