Як зробити прозорий фон в html css. Створення прозорого фону в HTML і CSS (ефекти opacity і RGBA). Задаємо прозорість у css background

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

Властивість 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 не обмежується тільки фоновим кольором у блоків ...

Ефект напівпрозорості елемента добре помітний на фоновому малюнку і отримав поширення в різних операційних системах, тому що виглядає стильно і красиво. У веб-дизайні напівпрозорість також застосовується і досягається за рахунок властивості 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. Напівпрозорий фон і непрозорий текст

Доброго времени суток, гіки веб-розробки, а також її новачки. Для тих, хто не стежить за трендами IT-галузі, а точніше за веб-модою, я хочу урочисто повідомити, що ця публікація на тему: «Як зробити прозорий блок css інструментами» вам як раз до речі. Адже в поточному 2016 році впровадження в онлайн-сервіси різних прозорих об'єктів вважається стильним ходом.

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

Спосіб 1. Допотопний

Коли ще були слабкі комп'ютери і не розвинені «здібності», девелопери придумали свій спосіб створення прозорого фону: використання прозорих пікселів по черзі з кольоровими. Таким чином створюється блок при масштабуванні виглядав як шахівниця, проте в звичайних обсягах він нагадував якусь прозорість.

Цей, на мою думку, «милиця» звичайно виручає в старих версіях браузерів, в яких не працюють сучасні рішення. Але варто відзначити, що якість відображення тексту , вписаного в такий, різко падає.

Спосіб 2. Не заморочений

У рідкісних випадках розробники вирішують проблему з впровадженням напівпрозорої картинки шляхом вставки ... вже готової напівпрозорої картинки! Для цього використовуються зображення, збережені у форматі PNG-24. Даний графічний формат дозволяє задавати 256 рівнів напівпрозорості.

Однак такий спосіб не зручний з кількох причин:

1. Internet Explorer 6 не працює з такою технологією, для нього потрібно писати скриптова код;
2. Не можна видозмінювати кольору фону в css;
3. Якщо в браузері відключена функція відображення зображень, то зникне.

Спосіб 3. пропіарених

Найбільш поширений і всім відомий спосіб зробити будь-якої блок прозорим є властивість opacity.

Значення параметра варіюється в діапазоні, де при 0 об'єкт невидимий, а при 1 - відображається повноцінно. Однак і тут є якісь неприємні моменти.

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

По-друге, Internet Explorer знову «верне носом» і аж до 8 версії не функціонує з opacity.

Для вирішення цієї проблеми використовується filter:alpha (Opacity = значення).

Розглянемо приклад.

Спосіб 4. Сучасний

На сьогоднішній день професіонали користуються інструментом rgba (r, g, b, a).

До цього я розповідав, що RGB - це одна з популярних колірних моделей, де R відповідає за всі відтінки червоного, G - відтінки зеленого та B - відтінки синього.

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

Головна перевага останнього способу - альфа-канал не зачіпає об'єкти, що знаходяться всередині стилізованого блоку.

rgba (r, g, b, a) підтримується починаючи з:

• 10 версії Opera;
• Internet Explorer 9;
• Safari 3.2;
• 3 версії Firefox.

Хочу відзначити цікавий факт! Гаряче улюблений Internet Explorer 7 видає помилку при поєднанні властивості background-colorз назвою квітів (background-color: gold). Тому варто використовувати тільки:

background-color: rgba (255, 215, 0, 0.15)

А тепер приклад.

Зверніть увагу, що текстовий контент блоку повністю видно (100% чорний), в той час як фону заданий альфа-канал рівний 0,88, тобто 88%.

На цьому публікація підійшла до кінця. Підписуйтесь на мій блог і не забувайте запрошувати друзів. Бажаю удачі у вивченні веб-мов! Бувай!

Прямим шляхом прозорість фонового зображення (принаймні на 2016-ий рік) ніяк через CSS (включаючи CSS 3) не встановиш. Є безліч обхідних способів вирішення даної проблеми.

змішання фонів

Найпростішим рішенням є смешніваніе двох фонів (зображення і напівпрозорого кольору). Цей спосіб підійде якщо під "прозорим фонововим зображенням" однотипний фон тому це не прозорість зовсім, а її імітація за рахунок змішування зображення з кольором. Встановлюєте подвійний фон складається з фонового зображення і потрібного кольору з альфа-каналом. Після цього вибираєте найбільш підходящий режим змішування і альфа-каналом кольору настраівате композицію до потрібного результату.

Background: url ( "/ images / img1.jpg"), rgba (255,255,255,0.9); background-blend-mode: color;

Додавання псевдоелемента

Найкращий спосіб досягти бажаного. Створюємо псевдоелемент за допомогою псевдокласу after. є