uni-app: Implement background gradient effect

Effect

code

single gradient color

background-image: linear-gradient(to top right, #f00, #00f);

Multiple gradient colors

background-image: linear-gradient(to bottom, #0073ff 0%, #1d6cff 25%, #1e8bff 50%, #41b3ff 100%); /* Multiple gradient colors*/

<template>
	<view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style> 
	 page{
		  background-image: linear-gradient(to bottom, #0073ff 0%, #1d6cff 25%,  #1e8bff 50%, #41b3ff 100%); /* 多个渐变色 */
	 }
</style>

`linear-gradient`Some commonly used attribute values:

1. Direction parameter : used to specify the direction of the gradient, such as to bottoma vertical gradient from top to bottom, to righta horizontal gradient from left to right, and the angle value can also be used to specify an oblique gradient. Commonly used direction parameters are:

to top ：vertical gradient from bottom to top
to bottom：vertical gradient from top to bottom
to left:Horizontal gradient from right to left
to right:Horizontal gradient from left to right
to top right:Gradient from lower left to upper right
to top left:Gradient from lower right to upper left
to bottom right:Gradient from top left to bottom right
to bottom left:Gradient from top right to bottom left

2. Color parameters : used to specify the color and position of the gradient. Multiple colors and positions can be set to generate multiple color gradients. Commonly used color parameters include:

<color>: You can use any valid CSS color value, such as #ff0000red, rgb(255, 0, 0)red, etc.
<percentage>: Indicates the position percentage of the color in the gradient, the value range is 0%~100%.

3. Repeat parameters : used to control whether the gradient appears repeatedly. Commonly used repeat parameters are:

no-repeat: No duplication, default value.
repeat: Repeats along the gradient direction.
repeat-x: Repeats in the horizontal direction.
repeat-y: Repeats in the vertical direction.