opacity

Описание

Свойство CSS3 opacity (CSS3 прозрачность) позволяет довольно просто создавать на веб-страницах прозрачные элементы.
CSS3 opacity (прозрачность в CSS3)
Кому-то может показаться, что это эффект прозрачности в дизайне сайта — это лишнее. Но я могу уверить Вас, что с помощью данного эффекта можно создавать интересные интерактивные элементы оформления, которые будут смотреться стильно и современно. И, к тому же, для указания прозрачности элемента достаточно добавить всего лишь ОДНУ строчку кода. Куда еще проще?!

opacity
Значения: число в диапазоне [0.0, 0.1]
Начальное значение: 1
Область применения: все элементы
Наследование: нет
Поддержка браузерами: Internet Explorer 9+, Chrome 1+, Opera 9+, Safari 2+, Firefox 1.7+, Android 2+
Версия CSS: CSS 3
Примечание:

Значения

Допустимы значения от 0.0 (полная прозрачность) до 1.0 (полная непрозрачность).
Если указать в значении свойства inherit, то значения непрозрачности будет унаследованы от родительского элемента.
Браузеры к этому свойству относятся очень по-дружески. Все современные браузеры поддерживают opacity, включая Internet Explorer 9.
Прозрачность для Internet Explorer версии 8 и ниже задается с помощью свойства filter:Alpha(opacity=XX), где ХХ — значение прозрачности в %.

Пример

img {opacity: 1.0;}

Результат

Пример

img {opacity: 0.4;}

Результат

Пример

Свойство непрозрачности opacityможно применять не только к изображениям. В приведенном ниже примере блоку div назначено значение непрозрачности 0.5

Результат

Сквозь этот блок с текстом будет виден низлежащий блок

Комментирование запрещено.