background-image

介绍

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

使用示例

语法

background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ),
  url('https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/doc/catfront.png');

取值

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

none 是一个表示无背景图的关键字。
<image> 用来标记将要显示的图片，支持多个背景叠加，背景之间以逗号隔开。 background-image 支持的图片格式与 image 一致，支持 jpg、png、gif、webp 等，参考图片支持格式

事件介绍

事件名称	类型	必填	说明
`bindbgload`	function	否	监听背景图片加载成功
`bindbgerror`	function	否	监听背景图片加载失败

关联 view 属性介绍

属性名称	类型	默认值	示例	必填	说明
Android skip-redirection	boolean	false	true	否	background-image使用`<url()>`且是cdn图片时才需要设置，当设置为true时可以跳过容器重定向的逻辑，优化相关耗时

形式定义

初始值	none
适用元素	all elements
是否支持继承	no
是否支持动画	no

形式语法

background-image = <bg-image>#

<bg-image> = none | <image>

<image> = <url()> | <gradient>

<url()> = url(<string>)

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

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

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

<conic-gradient()> =
  conic-gradient( [ from [ <angle> | <zero> ] ]? [ at <position> ]? , <color-stop-list> )

<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-stop> )*

<linear-color-stop> = <color>

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

与 Web 的区别

<image> 只支持 <url()> 和 <gradient> 两种方式。
<gradient> 目前支持 linear-gradient，radial-gradient 和 conic-gradient（3.6 版本开始支持）。
<linear-color-stop> 不支持 linear-color-hint

不支持 color-interpolation-method

不支持通过 <length> 设置位置

兼容性

LCD tables only load in the browser

#background-image

#介绍

#使用示例

#语法

#取值

#事件介绍

#关联 view 属性介绍

#形式定义

#形式语法

#与 Web 的区别

#兼容性