5 примеров, которые помогут понять, как работает CSS opacity


Оглавление (нажмите, чтобы открыть):

CSS3 Свойство opacity

Пример

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

div
<
opacity:0.5;
>

Попробуйте сами »
Еще примеры внизу этой страницы.

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

Свойство opacity поддерживается всеми основными браузерами.

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

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

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

Значение по умолчанию: 1
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: объект.style.opacity=0.5

Синтаксис

opacity: значение|inherit;

Значение Описание
значение Указывает прозрачность. От 0.0 (полностью прозрачное — невидимое) до 1.0 (полностью непрозрачное)
inherit Значение свойства opacity должно наследоваться от родительского элемента

Попробуйте сами — Примеры

Изменить прозрачность элемента
Этот пример демонстрирует, как использовать JavaScript для изменения прозрачности элемента.

Opacity перекрывает текст

Добрый день, не могу понять как исправить.
При наведении на текст opacity перекрывает текст.
http://www.cyberforum.ru/attachment. 1&d=1412871729

09.10.2014, 20:27

Изображение перекрывает текст
Создаю меню, есть 2 картинки, одна в фоне div-а, вторая рисуется в image, и есть текст, выводящийся.

Opacity
Проблема: есть iframe тег в которм отображается видео из youtube.com он располагается в.

Opacity-body
Всем привет body .get Я выставил на боди опасити 0.8 и хочу.

Свойство opacity
Доброго времени суток. Занялся версткой небольшого сайта и решил сделать один блок.

Opacity и text
Столкнулся с проблемой, как сделать резиновый текстовый блок, который имеет opacity прозрачный 0.1.

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+, что и учтено в коде.

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

Готовое решение. Используем библиотеку 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 / Transparency

Свойство opacity указывает непрозрачность/прозрачность элемента.


Прозрачное изображение

Свойство opacity может принимать значение от 0,0-1,0. Чем меньше значение, тем прозрачнее:

Примечание: IE8 и более раньше польза filter:alpha(opacity=x) . X может принимать значение от 0-100. Более низкое значение делает элемент более прозрачным.

Пример

Прозрачный эффект наведения

Свойство opacity часто используется вместе с селектором :hover для изменения непрозрачности при наведении указателя мыши:

Пример

img <
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
>

img:hover <
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
>

Пример объяснено

Первый блок CSS аналогичен коду, приведенному в примере 1. Кроме того, мы добавили, что должно произойти, когда пользователь нависает над одним из изображений. В этом случае мы хотим, чтобы изображение не было прозрачным, когда пользователь наводит курсор на него. CSS для этого opacity:1; .

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

opacity

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

12.0+ 9.0+ 2.0+ 4.0+ 9.0+ 3.1+

Примечание: браузер IE8 и более ранние версии поддерживает альтернативное CSS свойство filter .

Пример: filter: Alpha(opacity=50);

Описание

CSS свойство opacity (в переводе с анг. — непрозрачность) устанавливает уровень прозрачности элемента. Прозрачность задаётся числом от 0 (полная прозрачность) до 1 (полная непрозрачность).

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

Прозрачность картинки задаётся также с помощью CSS свойства opacity , примеры и код вы можете посмотреть в нашем самоучителе в уроке «CSS: Прозрачность».

Если вам нужно установить прозрачность только для фона блока, то следует использовать CSS свойство background или background-color со значением цвета в формате RGBA или HSLA. Если нужно задать прозрачность только для текста, то следует использовать свойство color со значением цвета в формате RGBA или HSLA.

Блог Vaden Pro

В статье описывается особенность применения свойства, которое определяет прозрачность элементов на странице. Тут рассказывается о потенциальных проблемах и способах их решения.

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

Теория и практика

Реализуется данный подход с помощью свойства opacity. Предлагаю рассмотреть реальный практический пример и, отталкиваясь от него, будем изучать работу данного свойства.

В браузере будет примерно такая картинка:

Попрактиковались? Теперь подойдем ближе к теоретической стороне рассматриваемого вопроса.

Свойство opacity, которое отвечает за эффект CSS прозрачности, было создано на основе спецификации CSS3. В его значении указывается степень непрозрачности элемента в десятичных долях. Говоря более понятным языком, запись значения 0.9 для изучаемого свойства в нашем примере означает, что элемент, которому присвоено свойство, не прозрачен на 90%. Соответственно, если будет указан в значении 0, то наш блок станет полностью прозрачным и не будет заметен. Не смотря на это, он не исчезает со страницы, так как остается зарезервированное место для него среди элементов.

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

    filter:prog >К нежелательным эффектам использования этих вспомогательных свойств относится их неспособность пройти проверку на валидацию. Кстати само свойство opacity без проблем проходит проверку только в CSS Level 3 (так как свойство было включено именно в эту спецификацию).

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

Это свойство должно относиться к стилю просвечиваемого блока.

На заметку

При назначении родительскому блоку прозрачности все его дочерние элементы становится тоже полупрозрачными, что приводит к ухудшению читабельности текста этого контейнера. Чтобы избежать этого нежелательного эффекта требуется просвечивать только фон. Для этого создается отдельный контейнер для фона, и отдельный – для контента. Не забываем установить уровень наложения контента с помощью свойства z-index, в противном случае требуемый эффект достигнут не будет.

Вот так будет выглядеть наше решение в браузере


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

Затемнение фона

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

Не вижу смысла нагружать Вас новым кодом и предлагаю работать с предыдущим. В прошлой записи меняем только цвет фона с синего на черный и цвет шрифта на красный, чтобы сохранялся контраст. Да, еще думаю, для более эффективного затемнения повысим уровень непрозрачности до 0.7. Теперь, чтобы создать эффект затемнения, контейнер с черным фоном должен накладываться на контент, что также достигается через z-index.

Наш предыдущий код принимает вид (HTML оставляем без изменений):

Методы скрытия элементов в CSS

Дата публикации: 2020-09-10

От автора: мы не придаем большого значения скрытию HTML-элементов через CSS; мы делаем это инстинктивно, пока не узнаем об аспекте доступности и о принципиальном отличие различных методов.

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

Конечно, есть и другие области, где важны различия между методами скрытия, например, в случае анимации. Анимировать свойство display невозможно, поэтому мы должны использовать opacity, но при этом скрытый контент останется интерактивным — если у нас есть интерактивный элемент, мы можем взаимодействовать с ним или нет, поэтому нам нужно найти решение, которое обычно связано со свойством visibility.

Вот некоторые примеры из повседневной жизни front-end разработчика, и я думаю они будут интересны вам. Я вспоминаю, сколько раз я скрывал элементы только через CSS, и, будучи честными, я редко использую это сознательно. За годы работы я выработал для себя правила, в каких ситуациях какой метод использовать. Я уверен, что это касается каждого CSS-разработчика.

Как правило, существует три свойства, цель которых — каким-то образом — скрыть элемент: display, visibility и opacity. Вы можете скрыть элемент и по-другому, но для этого вам нужно больше одного свойства. Мы поговорим о других методах в последнем разделе! Давайте начнем исследование!

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Скрытие элементов с помощью свойства display

При установке для свойства display значения none мы получим действительно скрытое состояние. Ваш контент будет по-прежнему присутствовать в HTML-файле, но его блок не генерируется, для элементов не будет отведено место. Вы также не можете взаимодействовать с компонентами. Вы можете выбрать элемент через JavaScript, но не можете получить его ширину или высоту.

Если вы используете display: none; все дочерние элементы также будут невидимы, и вы не сможете их вернуть, объявив для них block — или любое другое «видимое» значение. Вы не можете анимировать эти части каким-либо образом (с помощью CSS). Содержимое будет невидимым для экранных дикторов.

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

Скрытие элементов с помощью visibility

Объявление visibility: hidden; — это что-то среднее между display и opacity. При использовании свойства visibility, элемент имеет блок, поэтому он занимает свое место в макете, но мы не можем взаимодействовать с компонентом. Элементы, скрытые с помощью этого свойства, будут невидимы для экранных дикторов, но могут быть анимированы.

Для меня этот метод полезен, когда я разрабатываю выпадающие меню. В случае выпадающего меню мы используем абсолютное позиционирование, поэтому блок не является проблемой, потому что мы изымаем элемент из потока документов. Объединив visibility с opacity, мы можем анимировать элемент, а также отключить взаимодействие, когда выпадающее окно невидимо.

Если вы переключаете видимость, вы можете отобразить раскрывающийся список, когда переходите указателем мыши к тому месту, где оно находится; это потому, что при использовании opacity элемент является интерактивным, но при установке visibility: hidden; он исчезает.

Скрытие элементов с помощью opacity

Используя свойство opacity, мы можем скрыть элементы только визуально; это означает, что у них есть свой блок и они остаются интерактивными. Для этого свойства можно задать значение от 0 до 1, определяя его, мы устанавливаем прозрачность элемента и его дочерних элементов.

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

Само по себе это может быть полезно, когда мы разрабатываем какую-либо карточку, где контент отображается при наведении — и это не проблема, потому что мы отображаем его при событии hover — как показано в следующем примере:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Если вы просмотрите код, то увидите, что .sh-effect-delta__overlay имеет нулевую прозрачность.

Скрытие элементов, но отображение их для экранных дикторов

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

Скрытие элементов с помощью position

Скрыть элементы с использованием свойства position просто, мы устанавливаем высокое отрицательное значение для top и / или left. С помощью этого метода содержимое элемента по-прежнему доступно для экранного диктора, но оно «удаляется» из потока контента. Например, возьмем классический код .screen-reader-text:

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

Браузеры

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

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

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

CSS-прозрачность и ее применение для различных элементов

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

Прозрачность контента

Создавая средствами CSS-прозрачность контента, для начала стоит понять, как необходимо прописывать саму форму. Конечно же, в данном материале не будет углубления в стандартные теги для программирования страницы сайта в общем. Для наглядного примера речь пойдет о прямоугольной области, окрашенной монотонной заливкой. Чтобы отобразить ее, потребуется создать простенький файл стиля CSS с последующей привязкой, или же разместить код прямо на странице html-документа. Прописав для прямоугольного блока необходимые параметры высоты, ширины, цвета и контура, к стилю необходимо добавить код, позволяющий сделать прозрачность CSS-объекта. За это отвечает параметр «opacity: 0.X», так как это и есть уровень видимости. Чем ближе его значение к единице, тем объект становится незаметнее. Данный стиль будет исправно работать в браузерах, обладающих поддержкой CSS3. Такими инструкциями сейчас обладают практически все современные веб-обозреватели.

Повышение универсальности кода

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

Для Internet Explorer версии 5.5 и выше воспринимаемым кодом является весьма длинная и некрасивая строчка — «filter:prog >

Собственный код существует и для менее популярных браузеров. Одним из таких является Konqueror, больше известный пользователям рабочей среды KDE на UNIX-подобных системах. Для него прозрачность CSS потребуется прописать параметром «-khtml-opacity: 0.X».

Для полной уверенности в оптимизации своего кода можно добавить строчку, обеспечивающую поддержку одних из первых версий браузеров Mozilla: «-moz-opacity: 0.X».

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

Активность при наведении

Так как CSS-прозрачность чаще всего используется как оформление для элементов с гиперссылками, то активность при наведении на них становится одной из первостепенных задач. В качестве примера можно рассмотреть тот же прямоугольник. Допустим, необходимо, чтобы при наведении на блок прозрачность менялась с 0 до значения 0.5. Для получения такой возможности понадобится всего лишь занести уже имеющийся стиль, отвечающий за прозрачность, под дополнительный CSS-параметр hover. Данным свойством пользуются и для добавления таких эффектов, как изменение цвета и формы объектов при наведении. Это позволяет сделать необходимые области визуально активными, привлекая внимание посетителей к ссылкам или контенту.


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

В том случае, если описанный выше процесс понятен, добавить при помощи CSS прозрачность для изображений не составит никакого труда. Здесь даже не потребуется вносить изменения в сам код стиля. Его можно оставит прежним. Поработать придется только при верстке картинок в сам html-документ. Если в предыдущих случаях для вставки элемента использовались теги «div», то здесь попросту потребуется заменить их на «img», соответствующие данному типу контента. Стиль же для изображений подключаем тот же, что и для блоков. Конечно, применяя CSS, описанный в начале статьи, нужно будет изменить параметры высоты, ширины и краев для гармоничного вида вставленной картинки.

Прозрачность текста и фона

Вариант в примере с текстом аналогичен вставке изображений. Создавать в CSS прозрачность отдельно также не потребуется. В данном случае необходимо будет заменить теги на те, что используются для верстки текстовых полей. Таковыми являются «p» и «span».

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

На случай, если на сайте потребовалось сделать прозрачность фона, CSS и тут станет оптимальным вариантом. Так как background является по сути той же картинкой или формой, к нему необходимо всего лишь прикрепить наш стиль в основном коде веб-ресурса.

CSS прозрачность (Opacity vs RGBA)

На этом уроке мы с вами разберем такие CSS свойства – opacity и RGBA. Свойство Opacity отвечает только за прозрачность элементов, а функция RGBA – за цвет и прозрачность, если указать значение прозрачности альфа-канала.

CSS прозрачность Opacity

Цифровое значение для opacity задано в пределах от 0.0 до 1.0, где ноль это полная прозрачность, а единица наоборот — абсолютная непрозрачность. Например, для того, чтобы увидеть 50% прозрачности, надо выставить значение в 0.5. Надо иметь ввиду, что opacity распространяется на все дочерние элементы родителя. А это значит, что и текст на полупрозрачном фоне, тоже будет полупрозрачным. А это уже очень существенный недостаток, текст не так хорошо выделяется.

Прозрачность через CSS Opacity

На скриншоте отчётливо видно, что черный текст стал таким же полупрозрачным, как и голубой фон.

div <
background: url(images/yourimage.jpg); /* Фон картинка */
width: 750px;
height: 100px;
margin: auto;
>
.blue <
background: #027ав4; /* Цвет полупрозрачного фона */
opacity: 0.3; /* Значение полупрозрачности фона */
height: 70px;
>
h1 <
padding: 6px;
font-family: Arial Black;
font-weight: bolder;
font-size: 50px;
>

CSS прозрачность в формате RGBA

Формат для записи цвета RGBA, является более современной альтернативой для свойства opacity. R (red), G (green), B(blue) – значит : красный, зеленый, синий. Последняя буква A – означает альфа-канал, который и задает прозрачность. RGBA в отличии от Opacity не влияет на дочерние элементы.

Теперь давайте рассмотрим наш пример с использованием RGBA. Заменим эти строчки в стилях.

background: ##027ав4; /* Цвет фона */
opacity: 0.3; /* значение полупрозрачности фона */

на следующую одну строку

background: rgba(2, 127, 212, 0.3);

Как вы видите значение прозрачности 0.3 совпадает у обоих методов.

Результат примера с RGBA:

Второй скриншот намного лучше смотрится, чем первый.

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

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

Вывод

Формат RGBA поддерживают все современные браузеры, за исключением Internet Explorer. Ещё очень важно, что RGBA гибок, он действует только на конкретный заданный элемент, не затрагивая дочерних. Понятно, что для верстальщика это удобнее. Мой выбор однозначно в пользу формата RGBA для получения прозрачности в CSS.

Для лучшего закрепления материала и большей наглядности, предлагаю вам пройти мой видео-курс.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 1 ):

    спасибо за полезную статью.

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Мастер Йода рекомендует:  Как изменить размер таблицы в HTML
    Добавить комментарий