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

相关推荐
MartinYeung5几秒前
npm爆发大规模供应链攻击 蠕虫污染 2000+ 个包版本: 深度技术剖析
前端·npm·node.js
huabuyu1 分钟前
治好 AI 长回答的卡、闪、膨胀:渲染开销从 50 万次砍到 1000
前端·javascript
嘟嘟07175 分钟前
学了 useContext 还是不理解?从 prop drilling 到 useMouse 的一次完整复盘
前端·javascript·react.js
玉宇夕落5 分钟前
React useContext 与自定义 Hook —— 从零到一理解跨组件通信与状态共享
前端
涛涛ing6 分钟前
一行命令让AI帮你修性能问题:perfpatch正在改变前端优化的游戏规则
前端
huabuyu9 分钟前
模型吐到一半的 JSON 为什么不崩、不卡、不抖?流式 Function Call 的三层修复
前端·javascript
触底反弹11 分钟前
JS 运行原理与 Event Loop:从 Web Worker 实战说起
前端·javascript·react.js
无糖可可果13 分钟前
React Context 与自定义 Hooks 学习分享
前端
胡萝卜术15 分钟前
声明式与命令式的边界:从鉴权路由守卫到 useRef 的引用哲学
前端·javascript·面试
Python私教18 分钟前
如意 Django CRM 容器化实战:后端、前端、数据库、Redis 的协同启动逻辑
前端·数据库·django