background-image

介绍

background-image属性用于为一个元素设置一个或多个背景图像。
在绘制的时候，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像"最接近用户"。
元素的边框border会在他们之上被绘制，而background-color会在它们之下绘制。图像的绘制与元素边界和边框(border)之间的关系，需要在 CSS 属性background-clip和background-origin中定义。
如果一个指定的图像无法被绘制(例如：被指定的 URL 所对应的资源无法被加载)，绘制时会等同于其值被设置为none。

取值

每个背景图像被明确规定为关键字none或者一个<image> 。
可以提供由逗号分隔的多个值来指定多个背景图像:

background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 0, 0.5),
        rgba(0, 0, 255, 0.5)
    ), url('https://mdn.mozillademos.org/files/7693/catfront.png');

• none 是一个表示无背景图的关键字。

• <image> 用来标记将要显示的图片，支持多个背景叠加，背景之间以逗号隔开。

标准化语法

<bg-image> = none | <image>

where

<image> = <url> | <gradient>

where

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

where

<linear-gradient()> = linear-gradient( [<angle> | to <side-or-corner>]?, <color-stop-list>)

<radial-gradient()> = radial-gradient([<ending-shape> || <size> ] ? [ at <position> ]?, <color-stop-list>)

where

<side-or-corner> = [ left | right ] || [ top || bottom ]

<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> ] ]

<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint> ]? ]

where

<linear-color-stop> = <color>

<linear-color-hint> = <length-percentage>

<length-percentage> = <length> | <percentage>

与 Web 的区别

• <image>
  只支持<url()>和<gradient>两种方式。

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

• <linear-color-stop>
  不支持linear-color-hintopen in new window