background-image

# background-image

CSS background-image 属性用于为一个元素设置一个或者多个背景图像。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 语法

background-image: <bg-image>#;

# background-image 的属性值

名称

兼容性

描述

linear-gradient

使用由两种或多种颜色沿一条直线进行线性过渡的背景图像。

none

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

# 示例

hello uni-app x

该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <view>
      <!-- 测试iOS平台宽高为0时，设置渐变色会不会导致闪退 -->
      <view style="width: 0px; height: 0px; background-image: linear-gradient(to bottom,#f5f5f5,#eff2f5);"></view>
      <text>不支持背景图片，仅支持linear-gradient方法</text>
      <view v-for="(direction) in directionData">
        <text>background-image: linear-gradient({{direction}}, red, yellow)</text>
        <view class="common"
          :style="{'background-image': backgroundSelect ?'linear-gradient('+direction+', red, yellow)':''}"></view>
      </view>
      <view>
        <text>style 动态切换 background</text>
        <view @click='changeBg' class="common" :style='testStyle'></view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        backgroundSelect: true,
        directionData: ['to right', 'to left', 'to bottom', 'to top', 'to bottom left', 'to bottom right', 'to top left', 'to top right'],
        testStyle: "background:linear-gradient(to right, red, yellow)"
      }
    },
    methods: {
      //供自动化测试使用
      updateBackgroundSelect() {
        this.backgroundSelect = !this.backgroundSelect
      },
      changeBg() {
        const isColor = this.testStyle == "background:blue"
        if (isColor) {
          this.setBackgroundImage()
        } else {
          this.setBackgroundColor()
        }
      },
      setBackgroundColor() {
        this.testStyle = "background:blue"
      },
      setBackgroundImage() {
        this.testStyle = "background:linear-gradient(to right, red, yellow)"
      }
    }
  }
</script>

<style>
  .common {
    width: 250px;
    height: 250px;
  }
</style>

# 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）