#background

#介绍

background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color,image,origin 与 size,repeat 方式等等。 这是一个简写属性，可以在一次声明中定义一个或多个属性：background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size

#使用示例

css-apisrc/background/App.tsx

Code

预览

#语法

/* 使用 <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 属性被指定多个背景层时，使用逗号分隔每个背景层。
每一次的语法如下：

• 在每一层中，下列的值可以出现 0 次或 1 次：
  • <bg-image>
  • <position>
  • <bg-size>
  • <repeat-style>
• <bg-size> 只能紧接着 <position> 出现，以“/”分割，如："center/80%".
• <box> 可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设置 background-origin 和 background-clip。如果出现 2 次，第一次的出现设置 background-origin，第二次的出现设置 background-clip。

注意：background-color 只能在 background 的最后一个属性上定义，因为整个元件只有一种背景色

#<box>

参见 background-clip 和 background-origin

#<background-color>

参见 background-color

#<bg-image>

参见 background-image

#<position>

参见 background-position

#<repeat-style>

参见 background-repeat

#<bg-size>

参见 background-size

#注意事项

• color 必须写在最后一个 image 中，否则 parser 会认为这是一个无效 background 例如: background: red url('./a.png'), url('./b.png);' 会被当作错误的写法直接忽略。 正确的写法应该是：background: url('./a.png'),red url('./b.png);

#形式定义

#形式语法

[ <bg-layer> , ]* <final-bg-layer>

where

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <box> || <box>
<final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

where

<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}
<box> = border-box | padding-box | content-box

where

<image> = <url> | <gradient>
<length-percentage> = <length> | <percentage>

where

<gradient> = <linear-gradient> | <radial-gradient>

#与 Web 的区别

• <bg-layer> 中不支持 <attachment> 属性。
  
• <image> 中只支持 <url> 和 <gradient>

  标准 web 中还支持 <image-set>、<element()>、<paint()>、<cross-fade()> 等自定义绘图属性。
  

• <gradient> 中目前只支持 <linear-gradient> 和 <radial-gradient>

  标准 web 中还支持 <repeating-linear-gradient()>, <radial-gradient()>, <repeating-radial-gradient()>, <conic-gradient()>

#兼容性