在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颜色)。

相关推荐
EF@蛐蛐堂几秒前
Federation vs Garfish vs Micro-app 微前端选型(二)
前端·vue.js·前端框架
洋不写bug6 分钟前
前端html基础标签
前端·html
GISer_Jing15 分钟前
前端学习总结——AI&主流前沿方向篇
前端·人工智能·学习
尘世中一位迷途小书童25 分钟前
Monorepo 工具大比拼:为什么我最终选择了 pnpm + Turborepo?
前端·架构
一枚前端小能手27 分钟前
🔍 重写vue之ref和reactive
前端·javascript·vue.js
星链引擎29 分钟前
4sapi.com开发者进阶版(技术导向,侧重 “原理 + 最佳实践”)
前端
尘世中一位迷途小书童31 分钟前
2025年了,你还在用传统的多仓库管理吗?Monorepo 架构深度解析
前端·架构
fruge34 分钟前
前端性能优化实践指南:从理论到落地
前端·性能优化
快起来别睡了38 分钟前
用这 9 个 API,我把页面性能干到了 90+
前端
芒果茶叶1 小时前
深入浅出requestAnimationFrame
前端·javascript·html