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

相关推荐
子兮曰11 分钟前
Node.js 50个优势场景盘点:一个人单干,为啥我多数时候只用它
前端·后端
IT_陈寒11 分钟前
我花3小时debug,就因为JavaScript这个隐式转换坑
前端·人工智能·后端
excel1 小时前
Nuxt 中 useSeoMeta 与 useHead 的区别
前端
竹林8181 小时前
OmniGame 技术白皮书:从零依赖到 WebRTC P2P,重新定义网页小游戏的工程上限
前端·浏览器
ss2731 小时前
AI全栈实战 | 2.1-02 CSS 布局:垂直居中为什么是经典面试题?所有布局在解决什么矛盾
前端·css
律宏阔1 小时前
Flutter Riverpod 3:统一打印 Provider 错误与自动重试日志
前端·flutter
周洲08301 小时前
STM32片内Flash读写深度详解|掉电参数保存、底层原理
linux·前端·stm32
data analyse 4561 小时前
埋点工具的私有化部署成本高吗?
前端·数据分析·github
data analyse 4562 小时前
埋点工具的埋点查询语言难学吗?
前端·数据分析
DianSan_ERP2 小时前
多平台订单自动下载与回传的技术实现:从消息推送到状态闭环引言
java·linux·服务器·前端·网络·架构·自动化