uni-app:实现背景渐变效果

效果

代码

单个渐变色

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

多个渐变色

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

html 复制代码
<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常用的一些属性值:


1、方向参数 :用于指定渐变的方向,比如to bottom表示从上到下的垂直渐变,to right表示从左到右的水平渐变,还可以使用角度值来指定斜向渐变。常用的方向参数有:

  • to top :从下到上的垂直渐变
  • to bottom:从上到下的垂直渐变
  • to left:从右到左的水平渐变
  • to right:从左到右的水平渐变
  • to top right:从左下到右上的渐变
  • to top left:从右下到的左上渐变
  • to bottom right:从左上到右下的渐变
  • to bottom left:从右上到左下的渐变

2、颜色参数:用于指定渐变的颜色和位置,可以设置多个颜色和位置来生成多段颜色渐变。常用的颜色参数包括:

  • <color>:可以使用任何有效的CSS颜色值,比如#ff0000表示红色、rgb(255, 0, 0)表示红色等。
  • <percentage>:表示颜色在渐变中的位置百分比,取值范围是0%~100%。

3、重复参数:用于控制渐变是否重复出现,常用的重复参数有:

  • no-repeat:不重复,默认值。
  • repeat:沿着渐变方向重复出现。
  • repeat-x:在水平方向上重复出现。
  • repeat-y:在垂直方向上重复出现。
相关推荐
心一信息21 小时前
ThreeJS骨骼示例
css·css3·html5
2501_9159184121 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520861 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
jason_yang1 天前
基于BEM规范实现ElementPlus组件
css·scss
清风细雨_林木木1 天前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮1 天前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple
普通网友1 天前
支持二次开发的代练App源码:订单管理、代练监控、安全护航功能齐全,一站式解决代练护航平台源码(PHP+ Uni-app)
安全·uni-app·php
蜕变菜鸟1 天前
uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
uni-app
@大迁世界2 天前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说2 天前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first