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

相关推荐
岭子笑笑8 分钟前
vant 4 之loading组件源码阅读
前端
hxmmm12 分钟前
自定义封装 vue多页项目新增项目脚手架
前端·javascript·node.js
ETA812 分钟前
JS执行机制揭秘:你以为的“顺序执行”,其实是V8引擎在背后搞事情!
前端·javascript
鹏北海-RemHusband13 分钟前
微前端实现方式:HTML Entry 与 JS Entry 的区别
前端·javascript·html
瘦的可以下饭了39 分钟前
3 链表 二叉树
前端·javascript
我那工具都齐_明早我过来上班44 分钟前
WebODM生成3DTiles模型在Cesium地图上会垂直显示问题解决(y-up-to-z-up)
前端·gis
粉末的沉淀1 小时前
jeecgboot:electron桌面应用打包
前端·javascript·electron
1024肥宅1 小时前
浏览器相关 API:DOM 操作全解析
前端·浏览器·dom
烟西1 小时前
手撕React18源码系列 - Event-Loop模型
前端·javascript·react.js