Ефект напівпрозорості елемента добре помітний на фоновий малюнокі набув поширення в різних операційні системитому, що виглядає стильно і красиво. У веб-дизайні напівпрозорість також застосовується та досягається за рахунок властивості opacity або формату кольору RGBA, який задається для фону.

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

Основна особливість цієї властивості полягає в тому, що значення прозорості діє на все дочірні елементивсередині, а не лише на тлі. Це означає, що фон і текст стануть напівпрозорими і збільшити рівень прозорості, додаючи , не вийде. У табл. 1 показаний вигляд тексту та фону з різними значеннями opacity.

У прикладі 1 показано створення напівпрозорого блоку з використанням opacity.

Приклад 1. Фон на веб-сторінці

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

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

Мал. 1. Синтаксис застосування rgba

У прикладі 2 показано застосування формату RGBA для створення напівпрозорого тла.

Приклад 2. Напівпрозоре тло

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат цього прикладу показано на рис. 2. Значення непрозорості для фону встановлено на 90%.

Мал. 2. Напівпрозорий фон та непрозорий текст

Всім привіт. Як ви можливо знаєте, background – це css-властивість, яка дозволяє задати колір фону або завантажити зображення, яке виступатиме як фонове. У CSS3 також з'явилася можливість створення лінійних та радіальних градієнтів, але це тема для окремої статті. У цьому ж я хотів розповісти, як у css у властивості background задати прозорість.

Задаємо прозорість у css background

Отже, все це робиться просто завдяки такому формату запису кольору, як rgba . Якщо ви працюєте з графічними редакторами, то напевно знаєте, що режим кольору rgb розшифровується так: частка червоного кольору (red), частка зеленого (green) і синього (blue). Так ось, rgba практично те саме, тільки додається ще один параметр - прозорість. Записується так:

Background-color: rgba(173, 57, 22, 0.5)

Спочатку ми явно вказуємо, що задає колір у режимі rgba. Потім вказуємо значення насиченості трьох основних кольорів від 0 до 255, де 255 найбільша насиченість. Четвертий параметр і є наша прозорість. Тут пишеться значення від 0 одиниці. 1 – повністю непрозорий елемент, а 0 – повністю прозорий. Відповідно, якщо виставити 0, то фонового кольору не буде видно взагалі.

Тепер ви знаєте, як у css у властивості background задати прозорість. Для цього потрібно використовувати режим кольору rgba. Є ще властивість opacity, але воно застосовується до всього елемента загалом. Тобто при застосуванні opacity прозорість може бути застосована і до тексту, що зробить його нечитаним.

Прозоре тло на прикладі

Переваги напівпрозорого фону легко показати на прикладі. Наприклад, у нас є спільне тло сторінки. Ось так виглядав би блок, якби йому був заданий суцільний чорний колір:

А тепер поставимо цей же чорний колір блоку, але вкажемо його за допомогою колірного формату rgba, вказавши останнє значення 0.7, наприклад. Вийде так:
Тепер фон блоку просвічується і крізь нього видно фонову картинку. Ця картинка і фон наведені лише для прикладу. Як ви розумієте, в css background прозорість може стати в нагоді, коли вам потрібно, щоб фон вкладеного елемента просвічувався, не закриваючи інші фони, розташовані в інших шарах.

Сам колір задавати за допомогою rgba не складно. Як уже говорилося — перші три літери означають три основні кольори: червоний, зелений і синій, а точніше їхню частку (від 0 до 255). Прописуючи різні значення, можна отримувати мільйони різних кольорів, а напівпрозорість дозволить вам придумати ще масу красивих ефектів для сайту, якщо це потрібно буде.

Опис

Визначає колір елемента фону. Хоча ця властивість не успадковує властивості свого батька через те, що початкове значеннявстановлюється прозорим, колір фону дочірніх елементів збігається із кольором фону батьківського елемента.

Синтаксис

background-color:<цвет>| transparent | inherit

Значення

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

У даному прикладідля елементів веб-сторінки застосовується три різних способузавдання фонового кольору. Результат прикладу показано на рис. 1.

Мал. 1. Застосування background-color

Об'єктна модель

document.getElementById("elementID ").style.backgroundColor

Браузери

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

Для створення ефекту прозорості в CSS використовується властивість opacity.

Браузер IE8 і раніше його версії підтримують альтернативне властивість - filter:alpha(opacity=x) , де " x " може приймати значення від 0 до 100 , що менше значення, то прозоріше буде елемент.

Усі інші браузери підтримують стандартне CSS властивість opacity , яке може приймати як значення числа від 0.0 до 1.0 , чим менше значення, тим прозоріше буде елемент:

Спробувати »

Прозорість при наведенні

Псевдо-клас:hover дозволяє змінювати зовнішній вигляделементів при наведенні ними курсора миші. Ми скористаємося цією можливістю, щоб зображення при наведенні миші втрачало свою прозорість:

Спробувати »

Прозорість фону

Є два можливих способівзробити елемент прозорим: властивість opacity , описана вище, та вказівка ​​кольору фону у форматі RGBA.

Можливо, ви вже знайомі з моделлю представлення кольору у форматі RGB. RGB (Red, Green, Blue – червоний, зелений, синій) – колірна система, що визначає відтінок шляхом змішування червоного, зеленого та синього кольорів. Наприклад, для завдання жовтого кольору для тексту можна скористатися будь-якою з наступних об'яв:

Color: rgb(255,255,0); color: rgb(100%,100%,0);

Кольори, задані за допомогою RGB, відрізнятимуться від шістнадцяткових значень, використовуваних нами раніше тим, що дозволяють використовувати альфа-канал прозорості. Це означає, що крізь фон елемента з альфа-прозорістю буде видно, що знаходиться під ним.

Оголошення кольору RGBA схоже за синтаксисом зі стандартними правилами RGB. Однак, крім іншого, нам потрібно буде оголосити значення як RGBA (замість RGB) і задати додаткове десяткове значення прозорості після значення кольору в проміжку від 0.0 (повна прозорість) до 1 (повна непрозорість).

Color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);

Різниця між властивістю opacity та RGBA полягає в тому, що властивість opacity застосовує прозорість до всього елемента цілком, тобто весь вміст елемента стає прозорим. А RGBA дозволяє встановити прозорість окремим частинам елемента (наприклад, тільки тексту або фону):

Body ( background-image: url(img.jpg); ) .prim1 ( width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter : alpha(opacity=70);/*для IE8 і більш ранніх версій*/ text-align: center; . 1px solid black; font-weight: bold; text-align: center; ) Спробувати »

Примітка: значення RGBA не підтримуються у браузері IE8 і більше ранніх версіях. Для оголошення резервного варіанта кольору для старих браузерів, які не підтримують значення кольорів з альфа-каналами, слід зазначити його першим значення RGBA: background: rgb(255,255,0); background: rgba(255,255,0,0.5);

Властивість CSS RGBa дозволяє встановити фоновий колір з альфа-каналом (тобто заливати блоки напівпрозорим кольором).

Зрозуміло, у CSS є властивість opacity, проте основний його недолік: всі дочірні елементи всередині прозорого блоку також успадковуватимуть його прозорість.

Найчастіше використовують заливку фону елемента одно-піксельним PNG24 і фіксують прозорість в IE6, або фон роблять прозорим через css opacity. Текст позиціонують окремо вже в іншому елементі, але це, як на мене, не зовсім зручно…

За допомогою RGBaрішення виглядає так:

1. Припустимо, нам потрібне синє тло з прозорістю 50%.

А не підтримуватимуть його IE6–8, Opera 9.x, Mozilla Firefox 2.x

2. Для IE можна постаратися і зробити більш витончено:

Примітка: Колір у фільтрі визначається 8 числами. Перші 2 числа це рівень прозорості: FF - повністю непрозорий, 00 - прозорий. Наступні 6 чисел звичне позначення HTML кольору.

Використання RGBa не обмежується лише фоновим кольором у блоків.