Dobri-porady.pp.ua
Поради для маленьких і великих

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

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

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

css цвет фона

Є ще деякі незвичайні значення. Колір фону можна задати за допомогою HSL і # hsla-color 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;.

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