Background Image

CSS background-image 属性 linear-gradient 使用由两种或多种颜色沿一条直线进行线性过渡的背景图像。

函数方法

backgroundGradient(options)

获取渐变背景颜色

options

参数名称	类型	必填	可选值	描述
direction	string	是	direction 可选值	渐变方向
colorStart	string	是	色彩	UCS 色彩变量 或 Hex 颜色值
colorStop	string	是	色彩	UCS 色彩变量 或 Hex 颜色值

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开始支持）

温馨提示

使用 UCS 色彩变量，切换暗黑模式时则自动变更为深色颜色值。

UCS 色彩变量

<template>
	<view class="box" :style="[backgroundGradient('to right','primary','success')]">

	</view>
</template>

<script setup>
	import { backgroundGradient } from "@/uni_modules/ucs-css"; 
</script>

<style>
	.box {
		width: 100%;
		height: 123px;
	}
</style>

Hex 颜色值

<template>
	<view class="box" :style="[backgroundGradient('to right','#604CFC','#07C160')]">

	</view>
</template>

<script setup>
	import { backgroundGradient } from "@/uni_modules/ucs-css"; 
</script>

<style>
	.box {
		width: 100%;
		height: 123px;
	}
</style>