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

相关推荐
张较瘦_34 分钟前
前端 | 吃透CSS视觉特效:圆角、渐变、动画与变换核心解析
前端·css
Tzarevich35 分钟前
Tailwind CSS:原子化 CSS 的现代开发实践
前端·javascript·css
借个火er35 分钟前
React 19 源码揭秘(二):useState 的实现原理
前端
YaeZed1 小时前
Vue3-插槽slot
前端·vue.js
杨进军1 小时前
如何实现划词效果
前端·javascript
前端老爷更车1 小时前
esp32 小智AI 项目
前端
destinying1 小时前
五年前端,我凌晨三点的电脑屏幕前终于想通了这件事
前端·javascript·vue.js
想学后端的前端工程师1 小时前
【React Hooks深度实战指南:从原理到最佳实践】
前端·react.js·前端框架
elangyipi1231 小时前
前端面试题:如何减少页面重绘跟重排
前端·面试·html
想学后端的前端工程师2 小时前
【前端安全防护实战指南:从XSS到CSRF全面防御】
前端·安全·xss