background
Властивість-скорочення CSS background
("тло", "фон") встановлює усі властивості стилю тла за раз: колір, зображення, вихідне положення, розмір, метод повторення. Властивості-складові, не задані у складі скорочення background
, отримують свої усталені значення.
Спробуйте його в дії
Складові властивості
Ця властивість є скороченням наступних властивостей CSS:
background-attachment
(прикріплення тла)background-clip
(обрізання тла)background-color
(колір тла)background-image
(зображення тла)background-origin
(вихідне положення тла)background-position
(положення тла)background-repeat
(метод повторення тла)background-size
(розмір тла)
Синтаксис
/* За допомогою <background-color> (значення кольору тла) */
background: green;
/* За допомогою <bg-image> (значення зображення тла) та <repeat-style> (значення стилю повторення) */
background: url("test.jpg") repeat-y;
/* За допомогою <box> (значення рамок) та <background-color> (значення кольору тла) */
background: border-box red;
/* Одне зображення, відцентроване та масштабоване */
background: no-repeat center/80% url("../img/image.png");
/* Глобальні значення */
background: inherit;
background: initial;
background: revert;
background: revert-layer;
background: unset;
Властивість background
вказується як перелік одного чи кількох шарів тла, відділених комами.
Синтаксис кожного шару – наступний
-
Кожний шар може містити нуль або більше входжень будь-якого із наступних значень:
<attachment>
(прикріплення)<bg-image>
(зображення тла)<position>
(положення)<bg-size>
(розмір тла)<repeat-style>
(стиль повторення)
-
Значення
<bg-size>
може бути вказане лише відразу після<position>
, відділене символом '/', ось так: "center/80%
". -
Значення
<box>
може бути вказано нуль, один або два рази. Якщо вказане раз, то воно встановлює якbackground-origin
, такbackground-clip
. Якщо вказано двічі, то перше входження встановлюєbackground-origin
, а друге –background-clip
. -
Значення
<background-color>
може бути вказане лише в останньому вказаному шарі.
Значення
<attachment>
(прикріплення)Дивіться
background-attachment
. Усталено –scroll
.<box>
(рамки)Дивіться
background-clip
таbackground-origin
. Усталено –border-box
іpadding-box
відповідно.<background-color>
(колір тла)Дивіться
background-color
. Усталено –transparent
.<bg-image>
(зображення тла)Дивіться
background-image
. Усталено –none
.<position>
(положення)Дивіться
background-position
. Усталено – 0% 0%.<repeat-style>
(стиль повторення)Дивіться
background-repeat
. Усталено –repeat
.<bg-size>
(розмір тла)Дивіться
background-size
. Усталено –auto
.
Наступні три рядки CSS – рівносильні:
background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;
Занепокоєння щодо доступності
Браузери не надають допоміжній технології жодної особливої інформації про зображення тла. Це важливо перш за все для програм зчитування екрана, оскільки вони не оголошують присутності зображень тла і, таким чином, нічого не передають користувачам про них. Якщо зображення містить критичну для розуміння призначення сторінки в цілому інформацію, краще описати його в документі семантично.
- MDN Розуміння WCAG, пояснення Настанов 1.1
- Розуміння мірила успіху 1.1.1 | W3C Розуміння WCAG 2.0 (англ.)
Формальне визначення
Початкове значення | так як і всі інші властивості зі скорочення:
|
---|---|
Успадковується | ні |
Обчислене значення | так як і всі інші властивості зі скорочення:
|
Формальний синтаксис
[ <bg-layer> , ]* <final-bg-layer>де
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <\'background-color\'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>де
<bg-image> = none | <image>
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<attachment> = scroll | fixed | local
<box> = border-box | padding-box | content-boxде
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>де
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | <repeating-conic-gradient()>де
| rtl
= ltr
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] [ <resolution> || type(<string>) ]
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
<repeating-conic-gradient()> = repeating-conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )де
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>де
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>де
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>
Приклади
Встановлення фонів із ключовими словами кольорів та зображень
HTML
<p class="topbanner">
Зоряне небо<br />
Мерехчи-мерехчи<br />
Зоряне небо
</p>
<p class="warning">Ось – абзац</p>
CSS
.warning {
background: pink;
}
.topbanner {
background: url("starsolid.gif") #99f repeat-y fixed;
}
Результат
Специфікації
Специфікація | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Unknown specification
Сумісність із браузерами
Дивіться також
|