Всім привіт. Як ви можливо знаєте, 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 можна постаратися і зробити більш витончено:
.element (background: transparent; filter: progid: DXImageTransform .Microsoft .gradient (startColorstr = # 990000ff, endColorstr = # 990000ff); zoom: 1;) |
Примітка: Колір в фільтрі задається 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Однак такий спосіб не зручний з кількох причин:
- Internet Explorer 6 не працює з такою технологією, для нього потрібно писати скриптова код;
- Не можна видозмінювати кольору фону в css;
- Якщо в браузері відключена функція відображення зображень, то зникне.
Спосіб 3. пропіарених
Найбільш поширений і всім відомий спосіб зробити будь-якої блок прозорим є властивість opacity.
Значення параметра варіюється в діапазоні, де при 0 об'єкт невидимий, а при 1 - відображається повноцінно. Однак і тут є якісь неприємні моменти.
По-перше, всі дочірні елементи успадковують прозорість. А це означає, що вписаний текст також буде «просвічуватися» разом з фоном.
По-друге, Internet Explorer знову «верне носом» і аж до 8 версії не функціонує з opacity.
Для вирішення цієї проблеми використовується filter:alpha (Opacity = значення).
Розглянемо приклад.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Спосіб 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)
А тепер приклад.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
У нашому магазині ви знайдете всі види квітів.
|
Зверніть увагу, що текстовий контент блоку повністю видно (100% чорний), в той час як фону заданий альфа-канал рівний 0,88, тобто 88%.
На цьому публікація підійшла до кінця. Підписуйтесь на мій блог і не забувайте запрошувати друзів. Бажаю удачі у вивченні веб-мов! Бувай!
Прямим шляхом прозорість фонового зображення (принаймні на 2016-ий рік) ніяк через CSS (включаючи CSS 3) не встановиш. Є безліч обхідних способів вирішення даної проблеми.
змішання фонів
Найпростішим рішенням є смешніваніе двох фонів (зображення і напівпрозорого кольору). Цей спосіб підійде якщо під "прозорим фонововим зображенням" однотипний фон тому це не прозорість зовсім, а її імітація за рахунок змішування зображення з кольором. Встановлюєте подвійний фон складається з фонового зображення і потрібного кольору з альфа-каналом. Після цього вибираєте найбільш підходящий режим змішування і альфа-каналом кольору настраівате композицію до потрібного результату.
Background: url ( "/ images / img1.jpg"), rgba (255,255,255,0.9); background-blend-mode: color;
Додавання псевдоелемента
Найкращий спосіб досягти бажаного. Створюємо псевдоелемент за допомогою псевдокласу after. є
#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;)