Прозорість фону 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.

Відео: Прозорий фон блоку div з непрозорим текстом

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

Атрибут background-clip

Цей атрибут визначає поведінку фону під межами (наприклад, в разі пунктирних рамок):

• padding-box - Фон відображається строго всередині блоку;
• border-box - Зображення заходить під рамки;
• content-box - Картинка на тлі з`являється тільки всередині вмісту.

Приклад використання:

Відео: Як здолати картинку з прозорим фоном, для спрею в css

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. Якщо ви не можете встановити старі версії браузерів, знайдіть сервіс, який перевірить роботу сайту в різних браузерах онлайн.