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

相关推荐
Healer9184 分钟前
js请求的并发控制
前端
是你的小橘呀4 分钟前
从 "渣男" 到 "深情男":Promise 如何让 JS 变得代码变得专一又靠谱
前端·javascript·html
baozj7 分钟前
告别截断与卡顿:我的前端PDF导出优化实践
前端·javascript·vue.js
傲文博一8 分钟前
为什么我的产品尽量不用「外置」动态链接库
前端·后端
Healer9188 分钟前
Promise限制重复请求
前端
梵得儿SHI8 分钟前
Vue 响应式原理深度解析:Vue2 vs Vue3 核心差异 + ref/reactive 实战指南
前端·javascript·vue.js·proxy·vue响应式系统原理·ref与reactive·vue响应式实践方案
chenyunjie10 分钟前
我做了一个编辑国际化i18n json文件的命令行工具
前端
Emma歌小白14 分钟前
移除视觉对象里“行的型号”造成的行级筛选,但不移除用户的 slicer 筛选
前端
茶杯67515 分钟前
“舒欣双免“方案助力MSI-H/dMMR结肠癌治疗新突破
java·服务器·前端
昔人'15 分钟前
css `svh` 单位
前端·css