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

相关推荐
u0111026752 分钟前
WebP 转成 PNG 后为什么更大?图片格式转换不等于压缩
前端·javascript·vue.js
万少3 分钟前
Qoder sonus模型 20分钟,复刻 马斯克 飞天汽车
前端·后端·算法
java1234_小锋25 分钟前
【技术专题】HTML5 网页技术 - HTML5 列表标签
前端·html·html5
强二小哥帅27 分钟前
Kotlin 协程复习笔记
前端
不可能片场29 分钟前
工程实践 原子替换改了 ctime 怎么修
前端·electron
暧暧内含光30 分钟前
HTTP 文件传输体系全解:从协议标头、OSS 架构到流媒体分片
前端
静默回滚31 分钟前
浏览器能显示AVIF,却导不出一张AVIF
前端
小皮虾36 分钟前
小程序全局状态还能这么简单?只需初始化一次,页面自动同步
前端·javascript·微信小程序
用户8186180280040 分钟前
RESTful API 设计规范与版本演进
前端
补码缩写41 分钟前
前端AVIF编码开多线程快两三倍,speed调到8就不快了
前端