background
是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括 color,image,origin 与 size,repeat 方式等等。
这是一个简写属性,可以在一次声明中定义一个或多个属性:background-clip
, background-color
, background-image
, background-origin
, background-position
, background-repeat
, background-size
当 background
属性被指定多个背景层时,使用逗号分隔每个背景层。
每一次的语法如下:
<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>
<bg-image>
<position>
<repeat-style>
<bg-size>
background: red url('./a.png'), url('./b.png);'
会被当作错误的写法直接忽略。
正确的写法应该是:background: url('./a.png'),red url('./b.png);
初始值 | background-image: none background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-clip: border-box background-color: transparent |
适用元素 | all elements |
是否支持继承 | no |
是否支持动画 | no |
<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()>
LCD tables only load in the browser