Прозорість css Background – сірий прозорий фон. Як встановити прозорість фонового зображення в CSS? Білий напівпрозорий фон
На цьому уроці ми з вами розберемо такі CSSвластивості – opacityі RGBA. Властивість Opacityвідповідає лише за прозорість елементів, а функція RGBA– за колір та прозорість, якщо вказати значення прозорості альфа-каналу.
CSS прозорість Opacity
Цифрове значення для opacityзадано у межах від 0.0 до 1.0, де нуль це повна прозорість, а одиниця навпаки – абсолютна непрозорість. Наприклад, щоб побачити 50% прозорості, треба виставити значення 0.5. Треба мати на увазі, що opacityпоширюється попри всі дочірні елементи батька. А це означає, що і текст на напівпрозорому тлі теж буде напівпрозорим. А це вже дуже істотний недоліктекст не так добре виділяється.
Прозорість через CSS Opacity
На скріншоті виразно видно, що чорний текст став таким напівпрозорим, як і блакитний фон.
Div (
background: url(images/yourimage.jpg); /* Фон зображення */
width: 750px;
height: 100px;
margin: auto;
}
.blue (
background: #027ав4; /* Колір напівпрозорого фону */
opacity: 0.3; /* Значення напівпрозорості фону */
height: 70px;
}
h1 (
padding: 6px;
font-family: Arial Black;
font-weight: bolder;
font-size: 50px;
}
CSS прозорість у форматі RGBA
Формат для запису кольору RGBAє більш сучасною альтернативою для властивості opacity. R (red), G (green), B (blue)- Значить: червоний, зелений, синій. Остання літера A- означає альфа-канал, який і задає прозорість. RGBAна відміну від Opacityне впливає на дочірні елементи.
Тепер давайте розглянемо наш приклад із використанням RGBA. Замінимо ці рядки у стилях.
Background: ##027ав4; /* Колір фону */
opacity: 0.3; /* значення напівпрозорості фону */
на наступний один рядок
Background: rgba(2, 127, 212, 0.3);
Як бачите значення прозорості 0.3 збігається в обох методів.
Результат прикладу з RGBA:
Другий скріншот набагато краще виглядає, ніж перший.
Граючи з напівпрозорістю фону блоків, можна досягти на сайті цікавих ефектів. Важливо, щоб ці напівпрозорі блоки йшли поверх строкатого малюнка, наприклад фотографії. Тільки в цьому випадку ефект буде помітним. Цей прийом вже давно застосовувався в дизайні, ще до появи будь-яких CSS3, реалізовувався він у графічних програмах.
Якщо замовник вимагає, щоб верстка добре виглядала і у старих версіях браузера Internet Explorerтоді додавайте властивість filterта не забудьте закоментувати, щоб не постраждала валідність коду.
Висновок
Формат RGBAпідтримують усі сучасні браузери, за винятком Internet Explorer. Ще дуже важливо, що RGBAГнучкий, він діє лише на конкретний заданий елемент, не торкаючись дочірніх. Зрозуміло, що для верстальника це зручніше. Мій вибір однозначно на користь формату RGBAдля отримання прозорості в CSS.
Для кращого закріплення матеріалу та більшої наочності пропоную вам пройти .
Всім привіт. Як ви можливо знаєте, 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). Прописуючи різні значення, можна отримувати мільйони різних кольорів, а напівпрозорість дозволить вам придумати ще масу. гарних ефектівдля сайту, якщо це потрібно.
Головне потрібно вказати картинку на вашому комп'ютері чи телефоні, а потім натиснути кнопку ОК унизу цієї сторінки. За замовчуванням однотонний фонкартинки замінюється на прозорий. Колір фону вихідної картинки визначається автоматично, потрібно лише вказати в налаштуваннях, яким колір його замінювати. Основним параметром, що впливає якість заміни, є «Інтенсивність заміни» і кожної картинки може бути різною.
Приклад фотографії рожевої троянди без змін та після заміни однотонного фону на прозорий, білий та зелений:
Перший прикладз троянди на прозорому фоні зроблено з такими налаштуваннями:
1) Інтенсивність заміни - 38;
2) Згладжування по краях - 5;
3) Замінити однотонний фон на - прозорий;
4) Обрізання (<0) или Добавление (>0) по краях - "-70";
5) Інвертувати – відключено (галка не варто).
Для створення другого прикладу, з білим тлом, використовувалися такі ж налаштування, як і в першому прикладі, крім параметра: "Замінити однотонне тло на" - білий. У третій приклад, із зеленим фоном, також використані налаштування, як і в першому прикладі, крім параметра: "колір у форматі hex" - #245a2d.
Початкове зображення не змінюється. Вам буде надана інша оброблена картинка з прозорим або вказаним фоном.
З приходом CSS3 робота верстальників багато в чому стала простіше і логічніше: адже тепер можна справді гнучко налаштувати якийсь об'єкт, все рідше вдаючись до JavaScript. Допустимо, вам потрібно налаштувати прозорість фону - CSS відразу пропонує кілька варіантів.
Фон задається набором атрибутів, background-repeat, background-attachment, background-origin, background-clip, background-color), причому кожен з них можна прописати окремо або об'єднати під атрибутом background. Розберемо кожен із них докладніше.
Атрибут background-color
Такий спосіб підтримує навіть IE8. Декілька зображень як фон використовуються при гумовій верстці. Головне, не забувайте при використанні будь-якого зображення також задавати в CSS колір тла, оскільки у користувачів може просто не завантажити картинку.
Атрибут background-position
Якщо ви використовуєте зображення, щоб встановити фон блоку, CSS дозволить вам розмістити картинку в будь-якому місці екрану. За замовчуванням зображення знаходиться у верхньому лівому куті. Атрибут приймає або словесні вказівки (top, bottom, left, right), або чисельні (відсотки, пікселі та інші одиниці виміру). При цьому необхідно вказати два значення: по горизонталі та по вертикалі:
body (background-position: right center;) - у цьому прикладі фон буде розташовуватися в правій частині сторінки, причому знизу та зверху відстані до зображення однакові.
Атрибут background-size
Іноді потрібно CSS розтягнути фон або зменшити його розмір. Для цього використовують атрибут background-size, причому розмір фону можна встановити як у пікселях або відсотках, так і в будь-яких інших одиницях вимірювання.
Із цим атрибутом є деякі проблеми: для коректного відображення фону в ранніх версіях браузерів необхідно використовувати префікси. Звичайно, актуальні версії повністю підтримують цей атрибут і потреба у специфічних властивостях відпала.
Атрибут background-attachment
Цей атрибут визначає поведінку фонового зображення під час прокручування. Так, він може приймати 3 значення (не враховуючи вherit, загального для всіх представлених у цій статті атрибутів):
- fixed- робить картинку на тлі нерухомої;
- scroll- фон прокручується разом з іншими елементами;
- local— зображення на фоні прокручується, якщо прокручування має вміст. Фон, який виходить за межі вмісту, фіксується.
Приклад використання:
body (background-attachment fixed).
В даний час Firefox не підтримує останню властивість (local).
Атрибут background-origin
Цей атрибут відповідає за розташування елемента. Браузер ранніх версій вимагають використання префіксів. Сама властивість має три параметри:
- padding-boxпозиціонує фон щодо краю, враховуючи при цьому товщину рамки;
- border-boxвідрізняється від попереднього властивості тим, що лінія кордону може повністю або частково перекривати фон;
- content-boxпозиціонує зображення, прив'язуючи його до контенту.
Якщо задано кілька значень, браузери можуть реагувати по-своєму: Firefox і Opera сприймають лише перший варіант.
Атрибут background-repeat
Як правило, якщо фон заданий зображенням, він повинен повторюватися по горизонталі або по вертикалі. Для цього використовується атрибут background-repeat. Так, фон блоку, CSS якого містить таку властивість, може мати один із кількох параметрів:
- no-repeat- Зображення з'являється на сторінці в єдиному варіанті;
- repeat- Фон повторюється по осях x і y;
- repeat-x- Тільки по горизонталі;
- repeat-y- Тільки по вертикалі;
- space— фон повторюється, але якщо простір заповнити не виходить, між картинками з'являються порожнечі;
- round— зображення масштабується, якщо всю область не заповнено цілими картинками.
Приклад використання атрибуту:
body (background-repeat: no-repeat repeat)- аналогічно background-repeat: repeat-y.
У CSS3 можна встановити значення для декількох зображень, якщо перераховувати параметри через кому.
Атрибут background-clip
Цей атрибут визначає поведінку фону під межами (наприклад, у разі пунктирних рамок):
- padding-box- тло відображається строго всередині блоку;
- border-box- Зображення заходить під рамки;
- content-box- Картинка на тлі з'являється тільки всередині вмісту.
Приклад використання:
body (background-clip: content-box;).
Chrom та Safari вимагають використання префікса -webkit-.
Атрибути opacity та filter
Атрибут opacity дозволяє встановити прозорість фону — CSS властивість буде працювати у всіх браузерах. Значення встановлюється від 0.0 до 1.0 включно. При цьому ви можете встановити прозорість фону CSSбез цілого значення: замість 0.3 достатньо написати.
.block (background-image: url(img.png); opacity: .3;).
Щоб встановити прозорість фону, CSS якого підійде навіть для IE нижче дев'ятої версії, використовуйте атрибут filter:
.block (background-image: url(img.png); filter: alpha(opacity=30);).
У цьому випадку значення opacity встановлюється в межах від 0 до 100. Врахуйте, що атрибут opacity відрізняється від налаштування прозорості за допомогою RGBA спадковістю: при використанні opacity прозорим стає не тільки фон, а й усі елементи всередині блоку.
Завжди слідкуйте за статистикою використання браузерів по СНД та решті країн. Найбільша проблема всіх верстальників - старі версії IE, вони не дозволяють використовувати повною мірою CSS3. При верстці не забувайте користуватися спеціальними сервісами, які перевіряють, чи ваш браузер підтримує будь-яке властивість CSS. Якщо ви не можете встановити старі версії браузерів, знайдіть сервіс, який перевірить роботу сайту різних браузерахонлайн.
Влад Мержевич
Часткова прозорість при правильному її використанні дуже ефектно виглядає у дизайні сайту. Головне, щоб під напівпрозорими блоками був не однотонний малюнок, а зображення, саме в цьому випадку прозорість стає помітною. Такий ефект досягається різними способамиі якщо згадувати все, включаючи старомодні методи, це використання малюнка 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. Загалом, як завжди, доводиться обирати між браузерами та валідністю.
