Прозорі css. Властивість CSS opacity: керування прозорістю

У CSS є три способи змінити прозорість елемента:
за допомогою властивості opacity ,
за допомогою функції rgba() ,
за допомогою функції hsla().

1. Властивість opacity

Властивість opacity дозволяє зробити будь-який елемент веб-сторінки частково або повністю прозорим. Ця властивість змінює прозорість елементів, для яких встановлено фонове зображення (картинка) або фон за допомогою кольору або градієнта. Якщо елемент, для якого застосовано властивість opacity, містить у собі інші елементи, то вони також змінять свою прозорість.
Властивість opacity набуває значення в діапазоні від 0 (повністю прозорий) до 1 (непрозорий), наприклад:

H1 (color: #CD6829;) div (background: #CDD6DB; opacity: .3; )
Мал. 1. Прозорість елементів за допомогою opacity

2. Функція rgba()

Колірна модель RGBA створює колірний відтінок шляхом змішування у необхідних пропорціях червоного (Red), зеленого (Green)і синього (Blue)квітів, а альфа-канал (Alpha)відповідає за рівень прозорості кольору. На відміну від властивості opacity для блоку, що містить інші елементи, функція rgba() змінить прозорість тільки блоку.

Мал. 2. Колірна модель RGB h1 (color: #CD6829;) div (background: rgba (205, 214, 219, 0.3);)
Мал. 3. Прозорість елементів з допомогою функції rgba()

3. Функція hsla()

Функція hsla(), параметри якої означають тон (Hue), насиченість (Saturation), яскравість (Lightness)і альфа-канал (Alpha), також дозволяє встановити напівпрозорий колір.

Відтінки кольору задаються у відсотках, використовуючи відповідне значення кольору. Саме коло розбите на сектори, на межах яких знаходяться основні кольори:

0/360° - червоний колір
60 ° - жовтий колір
120 ° - зелений колір
180 ° - блакитний колір
240 ° - синій колір
270 ° - фіолетовий колір
300 ° - пурпурний колір.

Щоб отримати чорний колір, потрібно присвоїти показникам тону, насиченості та яскравості нульове значення - hsla (0, 0%, 0%, 1). Білий колір виходить при 100%-ному значенні яскравості hsla (0, 0%, 100%, 1), а сірий колір - при нульовому значенні насиченості hsla (0, 0%, 50%, 1).

ЧІІІІІКС!

Я ось що подумав, а чи не написати мені про якість прозорості для 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 "

Описание

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

Синтаксис

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.

Іноді виникає потреба зробити прозорий фон для певного блоку на сторінці. Досягти цього ефекту можна створенням прозорого фонового малюнка у форматі *.pngі встановивши його через властивість background: url(“./images/fon.png”);.

Використовуємо властивість OPACITY

Навіщо такі складнощі, якщо це можна зробити з допомогою CSS. Давайте створимо на сторінці основний блок ( page) і вкладений блок ( block), якому задамо прозорість. Кросбраузерність досягається наступним чином: властивість для Internet Explorer – filter:alpha(opacity=50) (значення прозорості в діапазоні від 0 до 100), для браузерів із підтримкою CSS3 стандарту – opacity:0.5 (число від 0.0 до 1.0).

HTML код:

Результат:

Прозорий фон для блоку

Як Ви помітили, прозорість поширюється на всі дочірні елементи

Прозорий фон для блоку

в DIVз класом blockі вони не можуть перевищити значення прозорості свого батька. Тобто все що знаходиться в даному блоці стає прозорим. Що робити, якщо треба залишити прозоре тло тільки у дива?

Використовуємо властивість BACKGROUND-COLOR

Нам необхідно внести деякі зміни до таблиці стилів CSS, а саме замінити для блоку DIVз класом blockвластивість opacityна властивість background-color.

Div.block ( width:260px; height:140px; margin-top:79px; margin-left:94px; border:1px solid #333333; /* прозорий фон тільки DIV.block */ background-color: rgba(255, 255 , 255, 0.5);/* Колір тла, прозорість 0.5*/ )

Результат:

Прозорий фон для блоку

У наведеному вище прикладі використовується для кольору і фону формат RGBA . Де перші три літери розшифровуються як red, green, blue (червоний, зелений, синій), остання символізує собою альфа-канал (a) і задає прозорістьь елемента від 0.0 до 1.0 .

Background-color: rgba(r, g, b, a);

У дужках замість літер ставиться значення компонента кольору, його можна подивитися у будь-якому графічному редакторі, наприклад Paint.Net(Скріншот). Останнє ж значення aвстановлює прозорість та збігається зі значенням властивості opacity.

http://cp77.comxa.com/verstka/css-transparent-fon