background
Интерактивный пример
background
устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение..
Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: background-clip
, background-color
, background-image
, background-origin
, background-position
, background-repeat
, background-size
, и background-attachment
.
Как и во всех сокращённых свойствах, любые пропущенные вложенные значения будут установлены в свои изначальные значения.
Синтаксис
/* Использование свойства <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-color
можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.Значения
Свойству можно указывать одно или более значений из данного списка в любом порядке:
<attachment>
- Смотри
background-attachment
<box>
- Смотри
background-clip
<background-color>
- Смотри
background-color
<bg-image>
- Смотри
background-image
<position>
- Смотри
background-position
<repeat-style>
- Смотри
background-repeat
<bg-size>
- Смотри
background-size
. Это свойство должно быть указано после <position>, разделённого символом '/'.
Формальный синтаксис
background =
[ (en-US) <bg-layer># (en-US) , ] (en-US)? (en-US) <final-bg-layer>
<bg-layer> =
<bg-image> || (en-US)
<bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US)
<repeat-style> || (en-US)
<attachment> || (en-US)
<box> || (en-US)
<box>
<final-bg-layer> =
<'background-color'> || (en-US)
<bg-image> || (en-US)
<bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US)
<repeat-style> || (en-US)
<attachment> || (en-US)
<box> || (en-US)
<box>
<bg-image> =
<image> | (en-US)
none
<bg-position> =
[ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage>? (en-US) ] (en-US)
<bg-size> =
[ (en-US) <length-percentage [0,∞]> (en-US) | (en-US) auto ] (en-US){1,2} (en-US) | (en-US)
cover | (en-US)
contain
<repeat-style> =
repeat-x | (en-US)
repeat-y | (en-US)
[ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){1,2} (en-US)
<attachment> =
scroll | (en-US)
fixed | (en-US)
local
<box> =
border-box | (en-US)
padding-box | (en-US)
content-box
<image> =
<url> | (en-US)
<image()> | (en-US)
<image-set()> | (en-US)
<cross-fade()> | (en-US)
<element()> | (en-US)
<gradient>
<length-percentage> =
<length> | (en-US)
<percentage>
<image()> =
image( <image-tags>? (en-US) [ (en-US) <image-src>? (en-US) , <color>? (en-US) ]! )
<image-set()> =
image-set( <image-set-option># (en-US) )
<cross-fade()> =
cross-fade( <cf-image># (en-US) )
<element()> =
element( <id-selector> )
<gradient> =
<linear-gradient()> | (en-US)
<repeating-linear-gradient()> (en-US) | (en-US)
<radial-gradient()> | (en-US)
<repeating-radial-gradient()> (en-US)
<image-tags> =
ltr | (en-US)
rtl
<image-src> =
<url> | (en-US)
<string> (en-US)
<color> =
<absolute-color-base> | (en-US)
currentcolor | (en-US)
<system-color> | (en-US)
<device-cmyk()>
<image-set-option> =
[ (en-US) <image> | (en-US) <string> (en-US) ] (en-US) [ (en-US) <resolution> (en-US) || (en-US) type( <string> (en-US) ) ] (en-US)
<cf-image> =
<percentage>? (en-US) && (en-US)
[ (en-US) <image> | (en-US) <color> ] (en-US)
<id-selector> =
<hash-token>
<linear-gradient()> =
linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<radial-gradient()> =
radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> ] (en-US)? (en-US) , <color-stop-list> )
<absolute-color-base> =
<hex-color> (en-US) | (en-US)
<named-color> | (en-US)
transparent | (en-US)
<rgb()> | (en-US)
<rgba()> | (en-US)
<hsl()> | (en-US)
<hsla()> | (en-US)
<hwb()> | (en-US)
<lab()> | (en-US)
<lch()> | (en-US)
<oklab()> | (en-US)
<oklch()> | (en-US)
<color()>
<device-cmyk()> =
device-cmyk( <cmyk-component>{4} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) )
<side-or-corner> =
[ (en-US) left | (en-US) right ] (en-US) || (en-US)
[ (en-US) top | (en-US) bottom ] (en-US)
<color-stop-list> =
<linear-color-stop> , [ (en-US) <linear-color-hint>? (en-US) , <linear-color-stop> ] (en-US)# (en-US)
<position> =
[ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) start | (en-US) end | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) left | (en-US) center | (en-US) right | (en-US) x-start | (en-US) x-end | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) y-start | (en-US) y-end | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) center | (en-US) [ (en-US) left | (en-US) right | (en-US) x-start | (en-US) x-end ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom | (en-US) y-start | (en-US) y-end ] (en-US) <length-percentage>? (en-US) ] (en-US) | (en-US)
[ (en-US) center | (en-US) [ (en-US) start | (en-US) end ] (en-US) <length-percentage>? (en-US) ] (en-US) [ (en-US) center | (en-US) [ (en-US) start | (en-US) end ] (en-US) <length-percentage>? (en-US) ] (en-US)
<rgb()> =
rgb( [ (en-US) <percentage> | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) ) | (en-US)
rgb( [ (en-US) <number> | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<hsl()> =
hsl( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<hwb()> =
hwb( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<lab()> =
lab( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<lch()> =
lch( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<oklab()> =
oklab( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<oklch()> =
oklch( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<color()> =
color( <colorspace-params> [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<cmyk-component> =
<number> | (en-US)
<percentage>
<alpha-value> =
<number> | (en-US)
<percentage>
<linear-color-stop> =
<color> && (en-US)
<length-percentage>? (en-US)
<linear-color-hint> =
<length-percentage>
<hue> =
<number> | (en-US)
<angle> | (en-US)
none
<colorspace-params> =
<predefined-rgb-params> | (en-US)
<xyz-params>
<predefined-rgb-params> =
<predefined-rgb> [ (en-US) <number> | (en-US) <percentage> | (en-US) none ] (en-US){3} (en-US)
<xyz-params> =
<xyz-space> [ (en-US) <number> | (en-US) none ] (en-US){3} (en-US)
<predefined-rgb> =
srgb | (en-US)
srgb-linear | (en-US)
display-p3 | (en-US)
a98-rgb | (en-US)
prophoto-rgb | (en-US)
rec2020
<xyz-space> =
xyz | (en-US)
xyz-d50 | (en-US)
xyz-d65
Примеры
HTML
<p class="topbanner">
Starry sky<br/>
Twinkle twinkle<br/>
Starry sky
</p>
<p class="warning">Here is a paragraph<p>
CSS
.warning {
background: red;
}
.topbanner {
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
}
Результат
Спецификации
Specification |
---|
CSS Backgrounds and Borders Module Level 4 # the-background |
{cssinfo}}
Совместимость с браузерами
BCD tables only load in the browser