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

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

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

Прозорість фону 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 (непрозорий).

css колір фону

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

Атрибут background-image

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

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

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

Атрибут background-position

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

CSS розтягнути фон
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.

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

Атрибут background-clip

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

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

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

body {background-clip: content-box;}.

Chrome і Safari вимагають використання префікса -webkit-.

Атрибути opacity і filter

Атрибут opacity дозволяє задати прозорістьфону - CSS властивість буде працювати у всіх браузерах. Значення встановлюється в межах від 0.0 до 1.0 включно. При цьому ви можете встановити прозорість фону CSS без цілого значення: замість 0.3 досить написати .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 прозорим стає не тільки фон, але і всі елементи всередині блоку.

задати прозорість фону CSS

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

</ P>>
Читайте ще: