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

相关推荐
一树论1 天前
浏览器插件开发经验分享二:如何处理日期控件
前端·javascript
小璞1 天前
六、React 并发模式:让应用"感觉"更快的架构智慧
前端·react.js·架构
Yanni4Night1 天前
LogTape:零依赖的现代JavaScript日志解决方案
前端·javascript
疯狂踩坑人1 天前
Node写MCP入门教程
前端·agent·mcp
重铸码农荣光1 天前
一文吃透 ES6 Symbol:JavaScript 里的「独一无二」标识符
前端·javascript
申阳1 天前
Day 15:01. 基于 Tauri 2.0 开发后台管理系统-Tauri 2.0 初探
前端·后端·程序员
想吃电饭锅1 天前
前端大厦建立在并不牢固的地基,浅谈JavaScript未来
前端
重铸码农荣光1 天前
一文吃透 JS 事件机制:从监听原理到实战技巧
前端
2503_928411561 天前
11.25 Vue内置组件
前端·javascript·vue.js
我有一个object1 天前
uniapp上传文件报错:targetSdkVersion设置>=29后在Android10+系统设备不支持当前路径。请更改为应用运行路径!
前端·javascript·vue.js·uniapp