Прозорий колір у css та способи його завдання. Background прозорість css – сірий прозорий фон Html як зробити прозорий фон

Подивися уважно на малюнок. Фон у вікна, що випадає, зроблений напівпрозорим. Це досить частий дизайнерський прийом. Давай подумаємо як це можна реалізувати.

Завдання

Зробити кросбраузерний напівпрозорий колір.

Рішення

Перша думка в даній ситуації – використовувати для фону png24-картинку із вже заданою напівпрозорістю. Але ця картинка зовсім зайва. Можна чудово обійтися і без неї (отже без зайвого запиту до сервера). Давай спробуємо знайти оптимальне рішення.

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

Звичайно, можна спробувати додати додатковий контейнер і застосовувати opacity тільки до нього, але цей HTML-елемент буде призначений лише для оформлення і буде зайвим. Чи можна обійтись без нього?

Звичайно можна! Якщо використати RGBA.

Формат опису кольору RGBA

CSS3 дозволяє задавати колір, використовуючи функції RGB та RGBA. При цьому ми повинні вказати частку кожної колірної складової, під яку приділяється один байт (від 0 до 255, раптом хто не знає).

Синтаксис у цієї справи дуже простий:

Background: rgb(0, 255, 0); /* чистий зелений колір */

Для RGBA додається четвертий параметр – альфапрозорість (від 0 до 1).

Background: rgba (255, 0, 0, 0.5); /* чистий червоний із прозорістю 50% */

Ось воно, вирішення нашого завдання. Досить встановити колір фону за допомогою rgba і все буде виглядати як нам потрібно. Без зайвих картинок та елементів!

А де мені взяти ці циферки?

Подивитися на складові кольори можна використовуючи інструмент фотошопу піпетка

Про кросбраузерність

Так як функція RGB значно старша, ніж RGBA і присутня ще з часів стандарту CSS2, то для підстраховки від найдавніших браузерів можна використовувати таку дублюючу конструкцію:

SomeBlock ( background: rgb(255, 0, 0); background: rgba(255, 0, 0, 0.5); )

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

Окремо доведеться подбати про IE. Ослоподібні аж до 8-ої версії включно не розуміють RGBA.

Як завжди: землю — селянам, фабрики — робітникам, а ослам — милицю! У вигляді .

Само собою, в бойових умовах виносимо це правило окремий CSS, який підключаємо .

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

Фішка в тому, щоб вказати початковий і кінцевий кольори однаковими (ff0000 - червоний) і скористатися тим, що для градієнта в цьому фільтрі можна встановити альфаканал (у прикладі значення 80).

Для довідки: у фільтрі використовується шістнадцяткова система і повністю непрозорому кольору відповідає код FF (у десятковому це 255). Відповідно шістнадцяткове 80 - це десяткове 128, тобто 50% прозорості.

Перевірено у:

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Chrome

Сьогодні я хочу поговорити про прозоре тло блоку тексту, як його робити, і що для цього пропонує CSS3. Перед тим, як перейти до rgba та hsla, розглянемо приклади використання напівпрозорого фону для блоку з текстом, а точніше те, як це досягається та які проблеми виникають. Для демонстрації використовуватимемо ось цю картинку, оброблену якоюсь програмою на java, і лінк на яку, на жаль, був давно втрачений.

Дивимося на картинку нижче. Є графічне тло, на яке потрібно накласти напівпрозорий блок з текстом. В ідеалі має бути те, що на малюнку під цифрою 2, але іноді може виникати те, що під цифрою 3. Існує ще один дефект, але про нього згадаю словесно трохи нижче, т.к. відскриншотити його було неможливо.

Напівпрозорий фон без rgba та hsla

1. Напівпрозорий PNG . Оптимальний варіант, т.к. на сьогоднішній день він найкросбраузерніший і найпростіший. Для того щоб блок був прозорий, необхідний однопіксельний напівпрозорий PNG, який заданий як бекграунд блоку. І все.
   
   Недоліки: Тільки один – потрібен
2. Прозорість через opacity . Прозорість блоку задається кросбраузерно наступним чином:

   opacity:0.5;
   filter: alpha (opacity = 50);
   -moz-opacity:0.5;

   де 0,5 та 50 – це 50% прозорості. Але є проблема. Якщо ми задамо потрібному нам блоку таку напівпрозорість, ми побачимо той третій варіант на зображенні вище – контент блоку також стане напівпрозорим. Однак вихід є – вільне позиціонування, за допомогою якого під блок тексту кладеться інший блок, якому і задана напівпрозорість.

   Розглянемо приклад. Нехай блок з помаранчевою картинкою – це тег body, контейнер, у якому буде і текст і прозора підкладка – #block_bg, усередині якого блок із напівпрозорим тлом #block_transparent, а блок із текстом – #block_text.

   
   

   
   

   Текст текст текст, багато-багато тексту

   
   

   body (background: url(image.jpg); )
   #block_bg (
   position: relative;
   overflow: hidden;
   width: 400px;
   padding: 10px;
   }
   #block_text (position: relative; z-index: 100; )
   #block_transparent (
   opacity: 0.5;
   filter: alpha(opacity=50);
   -moz-opacity: 0.5;
   background: #fff;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 90;
   height: 5000px;
   width: 400px;
   }

   Звертаю увагу, що необхідно задавати ширину прозорого блоку (рядок 19), інакше він згорнеться в 1 піксел, і ширину загального блоку (рядок 5), інакше текст виходитиме за межі прозорого блоку (хоча ширину можна і тексту задати, але принципової різниці не буде). Щоб відступити від тексту та краю прозорого блоку, використовуємо паддинг у шостому рядку. Щоб прозорість була регульована по висоті, задаємо їй висоту більше (рядок 18) і перекриття загального блоку (рядок 4).
   Отже, ми запхали все в один блок, який можна пхати в будь-яку частину сторінки, де є цікава підкладка. Так, може виникнути бажання поставити бекграунд загальному блоку block_bg, але краще не варто – ускладніть собі життя (залежно, звичайно, від завдання). Іншими словами, краще всю цю конструкцію запхати в окремий блок, якому задати паддинг і не мучитися.
   Недоліки: Занадто громіздко

rgb та hsl, rgba та hsla – властивості CSS3

Точніше це не зовсім властивості – це нова можливість задання кольору таких властивостей як background, color, border тощо.

Назва властивостей походить від колірних систем RGB (Red, Green, Blue) та від HSL (Hue, Satutation, Lightness). Перша система описує колірний простір за допомогою змішування основних кольорів – червоного, зеленого та синього. У другій системі компоненти кольору відображають інформацію про колір у більш звичній для людини формі: Що це за колір? Наскільки він насичений? Наскільки він світлий чи темний?

rgb та rgba

Почнемо з rgb та rgba. Значення r, g, b можуть задаватися від 0 до 255 або від 0 до 100%. Значення a (alpha, прозорість) вимірюється від 0 до 1 (дрібні значення задаються через точку – 0.4, 0.7 тощо). Якщо для r, g і b будуть задаватися значення, що перевищують їх допустимий діапазон (наприклад, 300 або 110% або -5), вони скоротяться до найближчого допустимого значення.

Розглянемо все на прикладі якості background (хоча бажаючі можуть взяти color або border).

background: rgb(0, 0, 255); /*чисто синій колір*/
background: rgb(100%, 50%, 0%); /*чисто синій колір*/
background: rgb(10, 145, 500); /*буде розпізнано як 10, 145, 255*/
background: rgba(10, 145, 255, 1); /*теж саме, що й попереднє*/
background: rgba(100, 50, 255, 0.1); /*дуже прозорий відтінок бузкового*/

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

hsl та hsla

І кілька слів про hsl та hsla. Значення a задається так само, як і у rgb і rgba, а з першими трьома параметрами справа трохи інакша. h визначається від 0 до 360, а s і l – від 0% до 100%.

І найголовніше. Якщо в rgb визначити колір з голови дуже складно (майже завжди необхідна стороння програма з піпеткою), то тут достатньо мати одну картинку перед очима, щоб все стало на свої місця. Зображення показує відтінки параметра h.

Щоб прикинути необхідний колір, вибираємо відтінок, потім прикидаємо s, насиченість кольору (де 0% – це ненасичений колір (відтінок сірого), а 100% – сама насиченість) та його світлоту (0% – при ньому колір завжди буде чорний, а при 100% – білий). Виходячи з вищесказаного, на малюнку показані світлові тони при насиченості 100% і світлоті 50%.

Тепер весь колірний простір у голові як на долоні. Звичайно ручний підбір не замінює піпетку, та й не всім потрібно в голові мати "колірний простір", але іноді, щоб швидко прикинути все, що треба і потестити - воно підходить.

І буквально пара прикладів

background: hsl(180, 100%, 50%); /*насичений блакитний колір*/
background: hsla(140, 50%, 30%, 0.5); /*напівпрозорий, ледь помітно, що відтінок зеленого*/

Недоліки: всі 4 властивості не підтримуються ішаком та старими браузерами.

Завершення

Загалом, CSS3 дає чергові дуже корисні речі, але, як завжди, IE – основне гальмо прогресу. Для сайтів клієнтів я б поки утримався від використання (ще мозок зазря виноситимуть) і брав варіант з PNG. А на своєму сайті – чому б і ні. Особливо, якщо його відвідують просунуті люди, які не сидять на ішаках або будь-яких уламках давнини.

У 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() змінить прозорість тільки блоку.

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

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

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

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

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

Часткова прозорість при правильному її використанні дуже ефектно виглядає у дизайні сайту. Головне, щоб під напівпрозорими блоками був не однотонний малюнок, а зображення саме в цьому випадку прозорість стає помітною. Такий ефект досягається різними способами і якщо згадувати всі, включаючи старомодні методи, це використання малюнка 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. Загалом, як завжди, доводиться вибирати між браузерами та валідністю.

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

Змішування фонів

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

Background: url("/images/img1.jpg"), rgba(255,255,255,0.9); background-blend-mode: колір;

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

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