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

相关推荐
喜欢踢足球的老罗5 分钟前
一张跨域图的“四次换乘“:blob URL 与 Chrome 扩展架构里的工程艺术
前端·chrome·架构
程序员黑豆6 分钟前
AI全栈开发 - Java:基本数据类型 vs 引用数据类型的内存存储
java·前端·ai编程
FserSuN8 分钟前
Chrome CORS / PNA / LNA 问题排查与解决方案
前端·chrome
小小小小宇15 分钟前
Claude Code 自动运行方法大全
前端
道友可好17 分钟前
AI 测试全绿,代码却是错的
前端·人工智能·后端
国科安芯36 分钟前
商业航天通信载荷数字处理单元供电架构研究——基于ASP7A84AS的高精度低压差线性稳压器技术分析
前端·单片机·嵌入式硬件·fpga开发·架构·安全性测试
TangentDomain1 小时前
AI 写代码时代,游戏 UI 架构为什么停在 MVP?
前端·游戏·架构
英勇无比的消炎药1 小时前
前端提效神器全新AI组件库TinyRobot改写日常开发模式
前端·vue.js
GuWenyue1 小时前
10分钟搞定TodoList实战!从0搭建Bun+TS的RESTful接口服务
前端·typescript·bun