在uniapp中使用背景渐变色与背景图不生效问题

list上有文字详情以及背景图,从背景可以看出是渐变色和 背景图片的结合。

因为使用到渐变色,所以要结合 background-blend-mode 属性来实现与背景图片叠加显示,否则只通过 background: linear-gradient(); background-image: url(); 设置不会生效,这样只能显示图片。

css 复制代码
 background-repeat: no-repeat;
		background-size: contain;
		background-image: 
 linear-gradient(180deg, #02AE81 0%, #01764A 100%),
 url('../../static/xxxx.png');
		background-position: right bottom;
		background-blend-mode: color-burn;

如果背景色不是渐变色,可以直接使用background-color: ; background-image: url();

background-blend-mode 属性定义了元素背景层的混合模式(background-image图片与background-color颜色)。

相关推荐
GISer_Jing2 分钟前
AI时代面试新常态——从“会用工具”到“深挖原理”的跨越
前端·人工智能·ai编程
IT_陈寒12 分钟前
React的useEffect把我坑惨了,这些闭包陷阱真要命
前端·人工智能·后端
前端之虎陈随易24 分钟前
有生之年系列,Nodejs进程管理pm2 v7.0发布
前端·typescript·npm·node.js
ayqy贾杰31 分钟前
Cursor SDK发布!开发者可直接搬走其内核
前端·vue.js·面试
椰猫子39 分钟前
SpringMVC(SpringMVC简介、请求与响应(请求映射路径、请求参数、日期类型参数传递、响应json数据))
java·前端·数据库
love530love43 分钟前
如何在 Google Chrome 中强制开启 Gemini AI 侧边栏(完整图文教程)
前端·人工智能·chrome·windows
光影少年44 分钟前
对typescript开发框架的理解?
前端·javascript·typescript
跨境数据猎手1 小时前
反向海淘代购系统:1688 / 淘宝自动代采 + API 同步(附可用源码)
前端
lUie INGA1 小时前
Go-Gin Web 框架完整教程
前端·golang·gin
a1117761 小时前
“像风之翼“无人机巡检平台仪表盘
前端·javascript·开源·html·无人机