Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

background-image

介绍

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

使用示例

css-apisrc/background-image/App.tsx
预览

语法

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 等，参考图片支持格式

事件介绍

事件名称类型必填说明
bindbgloadfunction否监听背景图片加载成功
bindbgerrorfunction否监听背景图片加载失败

关联 view 属性介绍

属性名称类型默认值示例必填说明
Android only skip-redirection		booleanfalsetrue否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()>

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

<radial-gradient()> = 
  radial-gradient( [ <ending-shape> || <size> ]? [ 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 的区别

兼容性

LCD tables only load in the browser

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