Ці властивості описують колір (найчастіше іменується як колір переднього плану) і фон для елемента (тобто поверхня, на якій розташовується зміст). Вони дозволяють встановити колір фону і (або) його малюнок. Також визначається позиція зображення малюнка фону, чи повторюється він і яким чином, і де він розміщується або переміщається відносно полотна.
Властивість «колір», як правило, успадковується. Властивість «фон» не успадковується, але фон батьківського елементу буде видно на просвіт, тому що за замовчуванням значення кольору фону для дочірніх елементів приймається як ‘transparent’ (прозорий).
Визначення кольору (‘color’)
Значення: <color> За замовчуванням: Визначається UA Область застосування: всі елементи Спадкування: є Відсоткове вираження: не визн.
Ця властивість описує колір тексту в елементі (найчастіше іменується як колір переднього плану). Є кілька різних способів описати, наприклад, червоний колір:
EM { color: red } /* natural language */
EM { color: rgb(255,0,0) } /* RGB range 0-255 */
Визначення кольору шпалер (‘background-color’)
Значення: <color> | transparent За замовчуванням: transparent Область застосування: всі елементи Спадкування: немає Відсоткове вираження: не визн.
Ця властивість описує колір шпалер елемента:
H1 { background-color: #F00 }
Визначення малюнка фону (‘background-image’)
Значення: <url> | none За замовчуванням: немає Область застосування: всі елементи Спадкування: немає Відсоткове вираження: не визн.
Ця властивість визначає малюнок фону елемента. При призначенні зображення для малюнка фону, необхідно також визначити колір фону, який буде використовуватися у разі недоступності зображення. Якщо зображення є, воно перекриває колір фону зверху:
BODY { background-image: url(marble.gif) }
P { background-image: none }
Визначення повтору малюнка фону (‘background-repeat’)
Значення: repeat | repeat-x | repeat-y | no-repeat За замовчуванням: repeat Область застосування: всі елементи Спадкування: немає Відсоткове вираження: не визн.
Якщо малюнок фону визначено, значення властивості «повтор малюнка фону» визначає, чи повторюється зображення і яким чином.
Значення ‘repeat’ вказує, що зображення повторюється як в горизонтальному, так і у вертикальному напрямку. Значення ‘repeat-x’ (‘repeat-y’) встановлює повтор зображення відповідно тільки в горизонтальному (вертикальному) напрямку, створюючи одну смугу із зображень від одного краю до протилежного. При значенні ‘no-repeat’ зображення не повторюється.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
У наведеному вище прикладі зображення малюнка фону повторюється тільки у вертикальному напрямку.
Визначення прив’язки фону (‘background-attachment’)
Значення: scroll | fixed За замовчуванням: scroll Область застосування: всі елементи Спадкування: немає Відсоткове вираження: не визн.
Якщо визначений малюнок фону, значення властивості "прив’язка"
(background-attachment) визначає, чи прив’язаний малюнок до полотна або переміщається разом зі змістом:
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
Ядро CSS1: UA має право розглядати ‘fixed’ як ‘scroll’. Тим не менш рекомендується, щоб вони правильно відпрацьовували ‘fixed’ принаймні для елементів HTML і BODY, тому що для автора не існує можливості використовувати зображення тільки для браузерів, що підтримують ‘fixed’.
Визначення положення фону (‘background-position’)
Значення: [<percentage> | <length>] | [top | center | bottom] | | [left | center | right] За замовчуванням: 0% 0% Область застосування: блокові та елементи, що заміщаються Спадкування: немає Відсоткове значення: по відношенню до сторони самого елемента
Якщо малюнок фону був визначений, значення властивості «положення фону» визначає його початкове розташування.
При парному значенні ‘0% 0%’, верхній лівий кут зображення встановлюється у верхньому лівому кутку поля, що оточує зміст елемента (тобто не того поля, що оточує відступ, рамку або кордон). При парному значенні ‘100% 100%’, нижній правий кут зображення встановлюється в нижньому правому куті елемента. При парному значенні ‘14% 84%’, точка зображення 14% вправо і 84% вниз буде встановлена на точці елемента 14% вправо і 84% вниз.
При парному значенні ‘2 cm 2cm’, верхній лівий кут зображення буде встановлено на відстані 2 см правіше і 2 см нижче верхнього лівого кута елементу.
Якщо задано тільки один відсотковий вираз або абсолютні одиниці, вони встановлюють тільки горизонтальне положення, а вертикальне за замовчуванням буде 50%. Якщо задані два значення, то перше з них – горизонтальне положення. Допускаються комбінації абсолютних одиниць і процентних виразів, наприклад, "50% 2cm". Допускаються негативні значення.
Для позначення положення зображення фону можуть бути також використані ключові слова, які можна комбінувати з відсотковим вираженням або абсолютними одиницями. Нижче перераховані можливі комбінації ключових слів і їх розшифровка:
- ‘top left’ або ‘left top’ рівноцінні ‘0% 0%’
- ‘top’, ‘top center’ або ‘center top’ рівноцінні ‘50% 0%’
- ‘right top’ або ‘top right’ рівноцінні ‘100% 0%’
- ‘left’, ‘left center’ або ‘center left’ рівноцінні ‘0% 50%’
- ‘center’ або ‘center center’ рівноцінні ‘50% 50%’
- ‘right’, ‘right center’ або ‘center right’ рівноцінні ‘100% 50%’
- ‘bottom left’ або ‘left bottom’ рівноцінні ‘0% 100%’
- ‘bottom’, ‘bottom center’ або ‘center bottom’ рівноцінні ‘50% 100%’
- ‘bottom right’ або ‘right bottom’ рівноцінні ‘100% 100%’
приклади:
BODY { background: url(banner.jpeg) right top }
/* 100% 0% */
BODY { background: url(banner.jpeg) top center }
/* 50% 0% */
BODY { background: url(banner.jpeg) center }
/* 50% 50% */
BODY { background: url(banner.jpeg) bottom }
/* 50% 100% */
Якщо малюнок фону прив’язаний відносно полотна (див. розділ «Визначення прив’язки фону»), зображення встановлюється щодо полотна, але не елементу. Наприклад:
BODY {
background-image: url (logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
У наведеному вище прикладі зображення встановлюється в нижній правий кут полотна.
Визначення властивостей фону в цілому (‘background’)
Значення: <background-color> | | <background-image> | | <background-repeat> | | <background-attachment> | | <background-position> За замовчуванням: для узагальнюючої властивості не визначено Область застосування: всі елементи Спадкування: немає Відсоткове вираження: стосовно <background-position>
Властивість "фон"(‘background’) – це узагальнююча властивість для встановлення окремих властивостей фону (тобто кольору, малюнка, повтору, прив’язки і положення) в одному правилі таблиці стилів.
Можливі значення узагальнюючої властивості "фон" включають сукупність можливих значень кожної з складових властивостей.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
Властивість "фон" завжди встановлює всі сукупні властивості фону відразу. У першому рядку вищевказаного прикладу явно заданий тільки колір фону, а значення інших властивостей приймаються за замовчуванням. У другому рядку всі сукупні властивості задані явним чином.
***
Це переклад статті.