з position: absolute; перед (або після) #main і на такій же висоті що і #main, потім застосовується background-image та opacity: 0.2; .

#main ( position: relative; ) #main:after ( content: ""; display: block; position: absolute; top: 0; left: 0; background-image: url(/wp-content/uploads/2010/11 /tandem.jpg), width: 100%; height: 100%; opacity: 0.2; z-index: -1;

Створення прозорого фону в HTML та CSS (ефекти opacity та RGBA)

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

Такий ефект досягається різними способами, включаючи старомодні методи, як використання малюнка PNG як тло, створення картатого зображення та властивість opacity. Але як тільки виникає необхідність зробити в блоці напівпрозоре тло, у цих методів виявляються неприємні зворотні сторони.

Розглянемо напівпрозорість тексту та фону – як правильно її використовувати в дизайні сайту:

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

HTML 5 CSS 3 IE 9

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

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

Напівпрозоре тло HTML 5 CSS 3 IE 9

Значення непрозорості для фону встановлено на 90% - напівпрозорий фон та непрозорий текст.

Влад Мержевич

Часткова прозорість при правильному її використанні дуже ефектно виглядає у дизайні сайту. Головне, щоб під напівпрозорими блоками був не однотонний малюнок, а зображення саме в цьому випадку прозорість стає помітною. Такий ефект досягається різними способами і якщо згадувати всі, включаючи старомодні методи, це використання малюнка PNG як тло, створення картатого зображення і властивість opacity . Але як тільки виникає потреба зробити в блоці напівпрозоре тло, у цих методів виявляються неприємна зворотна сторона. Зроблю невеликий огляд, щоб стало зрозуміло, про що йдеться, а також тих читачів, які не знайомі з нетрадиційними варіантами створення ефекту напівпрозорості.

PNG як фон

У графічному редакторі попередньо готується однотонний напівпрозорий малюнок, який зберігається у форматі PNG-24 (рис. 1). Особливістю цього формату є підтримка 256 рівнів прозорості, або, попросту кажучи, він вміє відображати напівпрозорі картинки.

Рис. 1. Зображення для створення фону

Після чого додаємо малюнок як тло через властивість background , як показано в прикладі 1.

Приклад 1. Використання напівпрозорого малюнка

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат цього прикладу показаний на рис. 3.

Рис. 2. Застосування фонового рисунка

Застарілий браузер Internet Explorer 6 не працює з напівпрозорістю в PNG-24, якщо з будь-яких причин необхідно підтримувати цей браузер, йому доведеться використовувати скрипти.

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

Клітчасте зображення

Цей метод відноситься до стародавніх способів реалізації напівпрозорості, коли браузери «нічого не вміли», і доводилося шукати нешаблонні рішення. Фокус полягає у створенні зображення, в якому чергуються прозорі та непрозорі пікселі (рис. 3). Така регулярна структура створює ефект напівпрозорості, насправді його імітуючи.

Рис. 3. Збільшений картатий малюнок

Ось як зрештою це виглядає (рис. 4).

Рис. 4. Імітація напівпрозорості

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

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

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

Приклад 2. Використання opacity

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Результат прикладу показано на рис. 5.

Рис. 5. Напівпрозорість тексту та фону

В Internet Explorer до версії 8.0 включно opacity не працює, тому для нього використовується специфічна для цього браузера властивість filter . Звичайно, воно призводить до невалідного коду CSS.

RGBA

Сучасний підхід набагато простіше і наочніше вищенаведених методів і полягає у використанні для кольору та фону формату RGBA. Перші три літери знайомі багатьом і розшифровуються як red, green, blue (червоний, зелений, синій), остання символізує альфа-канал і задає прозорість елемента. Формат запису такий.

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

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

Не всі браузери підтримують такий формат: Internet Explorer з версії 9, Opera з версії 10, Firefox з 3, Safari з 3.2. Але загалом, сучасні браузери коректно відображають прозорість. Для старих версій IE можна окремо вказати колір у звичному для нього форматі, причому, звичайно, ніякої прозорості не буде. Або знову скористатися властивістю filter , але тоді доведеться миритися, що прозорість також торкнеться і тексту (приклад 3). Щоб дотриматися валідного коду CSS, я скористався умовними коментарями.

Приклад 3. Використання RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Результат прикладу можна побачити на рис. 6.

Рис. 6. Напівпрозоре тло з непрозорим текстом

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

У браузері Internet Explorer 7 виявився баг при поєднанні background-color із різними значеннями. Наприклад, якщо встановити колір фону червоним, як показано нижче, то фон в IE7 взагалі не відобразиться.

Div (background-color: red; /* В IE7 не застосовується */ background-color: rgba(255, 0, 0, 0.5); )

Вирішується це заміною якості background-color на background .

Div (background: red; /* А це працює */ background: rgba(255, 0, 0, 0.5); ) Однак тут є один нюанс. Валідатор CSS "лається" на background , якщо йому задати значення у форматі RGBA. Але при цьому коректно ставиться до background-color. Загалом, як завжди, доводиться вибирати між браузерами та валідністю.

Всім привіт. Як ви можливо знаєте, 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). Прописуючи різні значення, можна отримувати мільйони різних кольорів, а напівпрозорість дозволить вам придумати ще масу красивих ефектів для сайту, якщо це потрібно буде.