Прозорість фону CSS. Прозорий фон або текст за допомогою CSS

З приходом CSS3 робота верстальників багато в чому стала простіше і логічніше: адже тепер можна дійсно гнучко налаштувати який-небудь об`єкт, все рідше вдаючись до javascript. Припустимо, вам треба налаштувати прозорість фону - CSS тут же пропонує кілька варіантів.

Фон задається набором атрибутів (background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color), причому кожен з них можна прописати окремо або ж об`єднати під атрибутом background. Розберемо кожен з них докладніше.

Атрибут background-color

У CSS колір фону можна задати декількома способами: за допомогою шістнадцятирічного коду, назви кольору або RGB-записи. У CSS3 стало можливо використовувати замість RGB-записи варіант з RGBA.

Шістнадцятковий код кольору записується у властивості після решітки: background-color: # FFDAB9. Якщо ж символи в такого запису попарно збігаються, код зазвичай трохи скорочують: # ccff00 можна записати як # cf0:

body {background-color: # cf0-}.

Назва є навіть у самих екзотичних квітів. Наприклад, крім стандартних red і white ви можете використовувати NavajoWhite (#FFDEAD) або Honeydew2 (# E0EEE0):

body {background-color: purple-}.

Останній варіант RGB або RGBA запису дозволяє задавати не тільки колір, але і прозорість фону CSS, проте спосіб працює в IE тільки старше 9 версії. Інші браузери нормально розпізнають варіант з прозорістю. За стандартами W3C переважно використовувати все-таки RGBA замість більш звичного RGB.

Останнє значення у RGBA і задає непрозорість фону від 0 (прозорий) до 1 (непрозорий).

Є ще деякі незвичайні значення. Колір фону можна задати за допомогою HSL і HSLA. Обидва були додані в CSS3, а тому не підтримуються IE нижче 9 версії. Варіанти ідентичні RGB або RGBA, тільки в іншому форматі: Hue (відтінок - значення на колірному колі, задається в градусах), Saturate (насиченість - інтенсивність кольору у відсотках, від 0 до 100), Lightness (светлота - яскравість, вимірюється аналогічно параметру Saturate ).

Атрибут background-image

Найбільш крос-браузерні варіант прозорого фону - це використання зображення. У CSS3 можна задати навіть кілька зображень, робиться це через кому. Приклад:

body {background-image: url (bg1.jpg), url (bg2.jpg)}.

Такий спосіб підтримує навіть IE8. Кілька зображень як фону використовуються при гумової верстки. Головне, не забувайте при використанні будь-якого зображення також задавати в CSS колір фону, так як у користувачів може просто не завантажитися картинка.

Атрибут background-position

Якщо ви використовуєте зображення, щоб задати фон блоку, CSS дозволить вам розташувати картинку в будь-якому місці екрана. За замовчуванням зображення розташовується в лівому верхньому кутку. Атрибут приймає або словесні вказівки (top, bottom, left, right), або чисельні (відсотки, пікселі і інші одиниці виміру). При цьому необхідно вказати два значення: по горизонталі і по вертикалі:

body {background-position: right center-} - в цьому прикладі фон буде розташовуватися в правій частині сторінки, причому знизу і зверху відстані до зображення однакові.

Атрибут background-size

Іноді потрібно за допомогою CSS розтягнути фон або зменшити його розмір. Для цього використовують атрибут background-size, причому розмір фону можна задати як в пікселях або відсотках, так і в будь-яких інших одиницях виміру.

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

Атрибут background-attachment

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

• 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 достатньо написати .3:

.block {background-image: url (img.jpg) - opacity: .3-}.

Щоб задати прозорість фону, CSS якого підійде навіть для IE нижче дев`ятої версії, використовуйте атрибут filter:

.block {background-image: url (img.jpg) - filter: alpha (opacity = 30) -}.

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

Завжди стежте за статистикою використання браузерів по СНД і всім іншим країнам. Найбільша проблема всіх верстальників - старі версії IE, саме вони не дозволяють використовувати повною мірою CSS3. При верстці не забувайте користуватися спеціальними сервісами, які перевіряють, чи підтримує ваш браузер яке-небудь властивість CSS. Якщо ви не можете встановити старі версії браузерів, знайдіть сервіс, який перевірить роботу сайту в різних браузерах онлайн.