随机背景颜色

5335ld

于 2024-04-19 15:48:00 发布

阅读量130

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/u014722196/article/details/137967753

版权

随机背景颜色

<div class="card" :style="{backgroundColor:'rgb('+Math.floor(Math.random() * 129)+','+Math.floor(Math.random() * 129)+','+Math.floor(Math.random() * 129)+',0.6)'}" >
		
				</div>

随机渐变背景颜色

<div class="card" :style="gradientStyle" ></div>
	export default {
	computed: {
		    gradientStyle() {
		      // 随机生成两个深色
		      const darkColor1 = `rgb(${Math.floor(Math.random() * 160) + 64},${Math.floor(Math.random() * 160) + 64},${Math.floor(Math.random() * 160) + 64})`;
		      const darkColor2 = `rgb(${Math.floor(Math.random() * 160) + 64},${Math.floor(Math.random() * 160) + 64},${Math.floor(Math.random() * 160) + 64})`;
		
		      // 创建一个线性渐变样式字符串
		      // to right 表示渐变从左到右
		      return {
		        background: `linear-gradient(to right, ${darkColor1}, ${darkColor2})`
		      };
		    }
		  },
}