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

相关推荐
雪芽蓝域zzs5 分钟前
Prettier (代码格式化)配置详解
前端·vue.js
晴天166 分钟前
Gradio 与 Streamlit:Python 快速构建 Web 应用的双子星-Day28
开发语言·前端·python
码哥DFS11 分钟前
LRU缓存
前端·javascript·缓存
mldong12 分钟前
一条命令,十分钟:jeeflow 工作流应用的六语言一键部署
前端·后端·架构
ly76899 小时前
HTML5 从入门到工程实践:语义化、表单、多媒体、性能与项目规范详解
前端·html·html5
人民广场吃泡面13 小时前
前端该重视的编程思想
前端
冬夜戏雪13 小时前
agent的trace 和eval
开发语言·前端·javascript
IT_陈寒13 小时前
Redis的DEL命令居然没删干净数据?这个坑我爬了半天
前端·人工智能·后端