background

介绍

background 是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括 color,image,origin 与 size,repeat 方式等等。 这是一个简写属性,可以在一次声明中定义一个或多个属性: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 属性被指定多个背景层时,使用逗号分隔每个背景层。
每一次的语法如下:

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

<box>

参见 background-clipbackground-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);

形式定义

初始值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> , ]* <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()>

兼容性

LCD tables only load in the browser

除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。