opacity() в CSS

Содержание

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).

Илон Маск рекомендует:  Что такое код swf_startbutton

:hover для простой смены прозрачности

Ещё отмечу, что для простой смены прозрачности (но не постепенного её изменения) в самый раз подходит псевдо-селектор :hover, который позволяет определить стили для элемента, в момент наведения на него мыши.

Обратите внимание, что картинка размещена внутри элемента A. Дело в том, что Internet Explorer вплоть до версии 6, понимает псевдо-селектор :hover, только применительно к ссылкам, а не к любым элементам, как положено в CSS (в IE7 положение исправлено).

Прозрачность и зазубренный текст в IE

С выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType, а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания. Касательно нашего случая, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст — bold, например, двоится, могут так же появляться различные артефакты, например, в виде чёрточек, зазубренного текста). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color, элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.

CSS opacity Property

Example

Set the opacity level for a

More «Try it Yourself» examples below.

Definition and Usage

The opacity property sets the opacity level for an element.

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See «More Examples» below).

Default value: 1
Inherited: no
Animatable: yes, see individual properties. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.opacity=»0.5″ Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
opacity 4.0 9.0 2.0 3.1 9.0

Note: IE8 and earlier versions supports an alternative, the filter property. Like: filter:Alpha(opacity=50).

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 Русаков Михаил Юрьевич. Все права защищены.

    CSS opacity Свойство

    Пример

    Задайте уровень непрозрачности для элемента

    Подробнее примеры ниже.

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

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

    Уровень прозрачности описывает уровень прозрачности, где 1 не является прозрачным, 0,5 составляет 50%, а 0 полностью прозрачен.

    Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы также становятся прозрачными. Это может сделать текст внутри полностью прозрачный элемент трудно читать. Если вы не хотите применять непрозрачность к дочерним элементам, используйте вместо этого значения цвета RGBA (см. ниже «Дополнительные примеры»).

    Значение по умолчанию: 1
    Inherited: no
    Animatable: yes, see individual properties. Читайте о animatable
    Version: CSS3
    Синтаксис JavaScript: object.style.opacity=»0.5″

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

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

    Илон Маск рекомендует:  print_r() в javascript
    Свойство
    opacity 4.0 9.0 2.0 3.1 9.0

    Примечание: IE8 и более ранние версии поддерживают альтернативу, свойство Filter. Как: фильтр: альфа (непрозрачность = 50).

    Синтаксис CSS

    Значения свойств

    Значение Описание
    number Задает непрозрачность. От 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный)
    initial Присваивает этому свойству значение по умолчанию. Читайте о initial
    inherit Наследует это свойство из родительского элемента. Читайте о inherit

    Другие примеры

    Пример

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

    Пример

    Чтобы не применять непрозрачность к дочерним элементам (как в примере выше), используйте вместо этого значения цвета RGBA . В следующем примере устанавливается непрозрачность для цвета фона, но не для текста:

    div.first <
    background: rgba(76, 175, 80, 0.1);
    >

    div.second <
    background: rgba(76, 175, 80, 0.3);
    >

    div.third <
    background: rgba(76, 175, 80, 0.6);
    >

    Совет: Узнайте больше о RGBA цветах в CSS RGBA Colors.

    Пример

    Как использовать JavaScript для изменения непрозрачности для элемента:

    Блог 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 opacity: управление прозрачностью

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

    Возможные значения

    Синтаксис свойства opacity в css выглядит так:

    На вход принимаются числовые значения в диапазоне от 0 до 1. Параметр может представлять собой доли единицы, при этом в качестве разделителя целой и дробной части в CSS используется точка.

    Элемент с нулевой прозрачностью становится невидимым, но все равно продолжает занимать свое место на странице и сохраняет возможность взаимодействовать с пользователем.

    Если значение свойства отличается от нуля, то реальная прозрачность будет вычисляться как процент от некоторого верхнего предела. В обычной ситуации opacity: 1 определяет полную непрозрачность элемента.

    Прозрачность дочерних узлов

    Однако если элемент имеет родителя, прозрачность которого отличается от единицы, вычисление изменяется. Потомок не может быть «менее прозрачным», чем любой из его предков. Значение CSS-свойства opacity родительского блока становится верхним пределом прозрачности дочернего узла.

    В подобной ситуации элемент child будет на 30 % прозрачным, несмотря на то что значение opacity равно единице.

    Примеры использования

    Пример 1. Полупрозрачность. Необходимо, чтобы под элементом target был виден основной фон блока.

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

    Пример 2. Динамическое управление прозрачностью. Значение свойства CSS opacity блока target изменяется при наведении на него курсора.

    Динамическая прозрачность

    Последний пример демонстрирует, что прозрачные элементы продолжают реагировать на события страницы, такие как наведение курсора. Это позволяет использовать javascript для управления свойством CSS opacity, а также применять механизмы transition и animation для плавного изменения режима отображения.

    Чтобы получить доступ к прозрачности из скрипта, нужно обратиться к объекту style конкретного элемента.

    Плавное исчезновение блока можно реализовать с помощью CSS-свойства transition:

    Теперь узел element при наведении мышки будет изменять прозрачность от 10 до 80 % в течение одной секунды, а при уходе курсора — тускнеть до исходного значения в течение двух секунд.

    Свойство CSS opacity в сочетании с механизмом transition позволяет создавать красивые эффекты.

    Альфа-канал вместо opacity

    Главные тонкости механизма opacity в CSS:

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

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

    opacity

    The opacity property is used to control the level of transparency of an element. Using this property, you can set an element to be fully transparent, fully opaque (default), or translucent.

    It takes a value that specifies the degree of transparency of the element. The number ranges anywhere between 0 and 1. A value of 1 is the default value, and makes the element fully opaque. A value of 0 makes the element fully transparent so you can’t see it anymore. A value between 0 and 1 makes it translucent (or semi-transparent).

    The lower the value goes from 1 to 0 the more transparent the element becomes, and the more you can see any backgrounds or elements that are behind/below it.

    The opacity property applies the specified opacity to the element as a whole, including its contents, rather than applying it to each descendant individually. This means that, even if the opacity property does not cascade (is not inherited by default), the descendants of an element will get the same opacity as their parent element anyway. There is no way to force a descendant of the element to becomes less transparent than its parent.

    Trivia & Notes

    The opacity property has the same effect as the visibility property in that it can make the element fully transparent (invisible) without affecting layout—the transparent element still takes up a space on the layout as if it were visible.

    If opacity has a value less than 1, the element forms a stacking context for its children. This means that any content outside of it cannot be layered in z-order between pieces of content inside of it, and vice versa. See the z-index property entry for details and an explanation.

    The opacity property can be used to create fade-in/fade-out effects with CSS. See the demo section below for a live example.

    The Performance Of opacity

    Paul Irish and Addy Osmani discussed the performance of the opacity property and shared the following results:

    Opacity is one of the few CSS properties that can be properly accelerated because the GPU can manipulate it easily.

    Basically, any layer where you want to fade the opacity over a CSS transition or animation, the browser is actually smart enough to throw it onto the GPU and do the manipulation over there and it’s going to be very fast.

    Of all CSS things, opacity is one of the most performant and you’re not going to have problems using it.

    Official Syntax

    • Syntax:
  • Initial: 1
  • Applies To: all elements
  • Animatable: yes, as a number
  • Values

    A value of 0 will render the element fully transparent (invisible). A value of 1 will render the element fully opaque (default value). Any number between 0 and 1 will make the element translucent (semi-transparent), and any backgrounds and elements behind it / under it will show through.

    Examples

    The following makes an image translucent, and then animates it into fully opaque on hover, using a CSS Transition, creating a subtle fade-in effect.

    The following example is compatible with versions of Internet Explorer that don’t support the opacity property. See the Browser Support section below for details.

    Live Demo

    Browser Support

    CSS3 Opacity

    Method of setting the transparency level of an element

    Прозрачность в CSS

    Средствами CSS можно задать прозрачность двумя способами.С помощью свойства opacity или свойства rgba.

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

    Синтаксис

    Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).

    К примеру нам надо, чтобы наша картинка была на половину прозрачной

    HTML

    CSS

    Но к сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:

    filter:prog >CSS

    Так же на IE может не работать если не указаны width(ширина) или height(высота).

    RGBA

    Свойство RGBA позволяет задать фоновый цвет с альфа-каналом. Альфа-канал определяет прозрачность элемента.

    Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

    Синтаксис

    Допустим, нам нужен текст с прозрачным фоном.

    HTML

    CSS

    Отличия opacity от rgba

    opacity влияет на весь блок, включая текст. Создаёт новый контекст наложения. Дочерние теги не могут быть ярче родительского элемента.

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

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

    Задача

    Сделать элемент HTML (например выпадающее меню) полупрозрачным.

    Выпадающее меню с полупрозрачностью
    (opacity=0.5) Выпадающее меню без прозрачности

    Решение

    В стилях для нужного элемента задаем:

    Теория

    W3C в своей рекомендации CSS3 задает свойство opacity для применения эффекта прозрачности элементов. Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).

    К сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:

      filter:prog >filter, -moz-opacity, -khtml-opacity валидации не проходят. Opacity — только CSS Level 3.

    Возможные проблемы

    Не работает в IE. Причина — не указаны width и height. Или можно добавить zoom: 1

    Делаем полупрозрачный фон

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

    CSS opacity Property

    Example

    Set the opacity level for a

    More «Try it Yourself» examples below.

    Definition and Usage

    The opacity property sets the opacity level for an element.

    The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

    Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See «More Examples» below).

    Default value: 1
    Inherited: no
    Animatable: yes, see individual properties. Read about animatable Try it
    Version: CSS3
    JavaScript syntax: object.style.opacity=»0.5″ Try it

    Browser Support

    The numbers in the table specify the first browser version that fully supports the property.

    Property
    opacity 4.0 9.0 2.0 3.1 9.0

    Note: IE8 and earlier versions supports an alternative, the filter property. Like: filter:Alpha(opacity=50).

    Илон Маск рекомендует:  Что такое код is_dir
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL