简体中文
简体中文
# background-image
CSS background-image 属性用于为一个元素设置一个或者多个背景图像。
# uni-app x 兼容性
| Android | iOS | web |
|---|---|---|
| 3.9 | 4.11 | 4.0 |
# 语法
background-image: <bg-image>#;
# background-image 的属性值
linear-gradient
使用由两种或多种颜色沿一条直线进行线性过渡的背景图像。
# 兼容性
# background-image 的属性值兼容性
| Android | iOS | web | |
|---|---|---|---|
| linear-gradient | 3.9 | 4.11 | 4.0 |
# 浏览器兼容性
| Chrome | Edge | Firefox | Opera | Safari | IE | |
|---|---|---|---|---|---|---|
| background-image | √（ 1 ） | √（ 12 ） | √（ 1 ） | √（ 3.5 ） | √（ 1 ） | √（ 4 ） |
# App平台
App平台暂不支持背景图，仅支持linear-gradient设置背景渐变色。
linear-gradient仅支持三个参数，格式如下：
linear-gradient(<direction>, <color-start>, <color-stop>)
- direction
渐变方向，字符串类型，支持以下值：- to right：从左向右渐变
- to left：从右向左渐变
- to bottom：从上到下渐变
- to top：从下到上渐变
- to bottom left：从右上角到左下角（3.99开始支持）
- to bottom right：从左上角到右下角
- to top left：从右下角到左上角
- to top right: 从左下角到右上角（3.99开始支持）
- color-start
渐变起始点颜色值，支持RGB（rgb(255, 0, 0)）；RGBA（rgba(255, 0, 0, 0.5)）；十六进制（#ff0000）；精简写法的十六进制（#f00）；色值关键字（red） - color-stop
渐变终点颜色值，支持RGB（rgb(255, 0, 0)）；RGBA（rgba(255, 0, 0, 0.5)）；十六进制（#ff0000）；精简写法的十六进制（#f00）；色值关键字（red）
background-image 优先级高于 background-color，同时设置 background-image 和 background-color 时 background-color 被覆盖。
