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

相关推荐
软件聚导航43 分钟前
uniapp 实现 ble蓝牙同时连接多台蓝牙设备,支持app、苹果(ios)和安卓手机,以及ios连接蓝牙后的一些坑
android·ios·uni-app
那就可爱多一点点2 小时前
H5页面多个视频如何只同时播放一个?
前端·音视频
前端郭德纲4 小时前
浅谈React的虚拟DOM
前端·javascript·react.js
2401_879103685 小时前
24.11.10 css
前端·css
ComPDFKit6 小时前
使用 PDF API 合并 PDF 文件
前端·javascript·macos
yqcoder6 小时前
react 中 memo 模块作用
前端·javascript·react.js
优雅永不过时·7 小时前
Three.js 原生 实现 react-three-fiber drei 的 磨砂反射的效果
前端·javascript·react.js·webgl·threejs·three
神夜大侠9 小时前
VUE 实现公告无缝循环滚动
前端·javascript·vue.js
明辉光焱9 小时前
【Electron】Electron Forge如何支持Element plus?
前端·javascript·vue.js·electron·node.js
柯南二号10 小时前
HarmonyOS ArkTS 下拉列表组件
前端·javascript·数据库·harmonyos·arkts