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

相关推荐
旺王雪饼 www3 分钟前
localStorage 和 sessionStorage区别与联系
服务器·前端·javascript
道友可好12 分钟前
Superpowers vs OpenSpec vs Spec Kit:该选哪个?
前端·人工智能·后端
এ慕ོ冬℘゜14 分钟前
【双月日期范围选择器】博客(可直接交作业 / 上线)
前端·javascript·交互·jquery
问心无愧051340 分钟前
ctf show web入门102
android·java·前端·笔记
前端尤雨西1 小时前
package.json 中版本号遵循什么原则
前端
用户81423861188411 小时前
CSS或JS实现逐帧动画方案
前端
光影少年1 小时前
react性能优化
前端·react.js·掘金·金石计划
深蓝电商API1 小时前
逆向工程入门:从Chrome DevTools到JS混淆还原
前端·javascript·chrome·爬虫·chrome devtools
狗凯之家源码网1 小时前
UniApp 数藏系统源码部署与定制开发全指南
uni-app
石山岭1 小时前
# iOS 题库
前端