background-image
Властивість CSS background-image
(зображення тла) встановлює одне або більше зображень тла елемента.
Спробуйте його в дії
Зображення тла наносяться на шарах контексту нагромадження одне поверх одного. Перший вказаний шар наноситься так, ніби він найближчий до користувача.
Межі елемента наносяться поверх зображень тла, а background-color
– під їх сподом. Те, як зображення наносяться відносно рамок та їх меж, визначається властивостями CSS background-clip
і background-origin
.
Якщо певне зображення не може бути нанесено (наприклад, коли файл, вказаний через URI, не може бути завантажений), браузери обробляють таку ситуацію так, ніби вказано значення none
.
Примітка: Навіть якщо зображення непрозорі, і колір тла не повинен з'явитися за звичайних умов, веброзробники мусять завжди вказувати
background-color
. Якщо зображення не можуть бути завантажені, – наприклад, коли мережа недоступна, – колір тла буде використаний як запасний варіант.
Синтаксис
Кожне зображення тла вказується як ключове слово none
або як значення <image>
.
Аби вказати кілька зображень тла – слід вказати кілька значень, розділених комами:
background-image: linear-gradient(
to bottom,
rgba(255, 255, 0, 0.5),
rgba(0, 0, 255, 0.5)
), url("catfront.png");
/* Глобальні значення */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;
Значення
none
Ключове слово, що вказує на відсутність зображень.
<image>
Значення
<image>
, котре вказує зображення до нанесення. Може бути кілька зображень, розділених комами, оскільки підтримуються кілька фонів.
Занепокоєння щодо доступності
Браузери не надають допоміжній технології жодної особливої інформації про зображення тла. Це важливо перш за все для програм зчитування екрана, оскільки вони не оголошують присутності зображень тла і, таким чином, нічого не передають користувачам про них. Якщо зображення містить критичну для розуміння призначення сторінки в цілому інформацію, краще описати його в документі семантично.
Формальне визначення
Початкове значення | none |
---|---|
Успадковується | ні |
Обчислене значення | as specified, but with url values made absolute |
Формальний синтаксис
<bg-image>#де
<bg-image> = none | <image>
де
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
де
<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>
<length-percentage> = <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
<div>
<p class="catsandstars">Цей параграф сповнений котів<br />та зірок.</p>
<p>А цей – ні.</p>
<p class="catsandstars">Ось іще коти для вас.<br />Погляньте на них!</p>
<p>І – це все.</p>
</div>
CSS
p {
font-size: 1.5em;
color: #fe7f88;
background-image: none;
background-color: transparent;
}
div {
background-image: url("mdn_logo_only_color.png");
}
.catsandstars {
background-image: url("startransparent.gif"), url("catfront.png");
background-color: transparent;
}
Результат
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-image
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 4 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
element()
|
Chrome No support No | Edge No support No | Firefox Full support 4 | Internet Explorer No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox for Android Full support 4 | Opera Android No support No | Safari on iOS No support No | Samsung Internet No support No |
Gradients | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.6 | Internet Explorer Full support 10 | Opera Full support 11 | Safari Full support 4 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 3.2 | Samsung Internet Full support 1.0 |
image-rect()
|
Chrome No support No | Edge No support No | Firefox Full support 4 | Internet Explorer No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox for Android Full support 4 | Opera Android No support No | Safari on iOS No support No | Samsung Internet No support No |
image-set()
|
Chrome Full support 21 | Edge Full support 79 | Firefox No support No | Internet Explorer No support No | Opera Full support 15 | Safari Partial support 6 | WebView Android Full support 4.4 | Chrome Android Full support 25 | Firefox for Android No support No | Opera Android Full support 14 | Safari on iOS Partial support 6 | Samsung Internet Full support 1.5 |
Multiple backgrounds
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.6 | Internet Explorer Full support 9 | Opera Full support 10.5 | Safari Full support 1.3 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
SVG images
|
Chrome Full support 8 | Edge Full support 12 | Firefox Full support 4 | Internet Explorer Full support 9 | Opera Full support 9.5 | Safari Full support 5 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 5 | Samsung Internet Full support 1.0 |
Дивіться також
-
Типи даних, пов'язані з зображеннями:
<image>
,<gradient>
-
Функції, пов'язані з зображеннями: