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

相关推荐
XLYcmy15 分钟前
HTML/CSS/JS 基础与 Vue 技术栈深度解析
java·前端·css·html·vue3·vue2·api
新知图书34 分钟前
12.3 智能体中Skill的约束与自进化实战
java·前端·数据库
风月说与山鬼37 分钟前
四、Tailwind CSS——间距与尺寸
前端·css·tailwind css
en.en..42 分钟前
C语言 static函数与头文件封装规范
java·c语言·前端
计算机魔术师1 小时前
旅途中用手机远程控制电脑?电脑不在身边,ToDesk/UU远程/TeamViewer移动端深度实测
前端
风月说与山鬼1 小时前
三、Tailwind CSS——排版与文字样式
前端·css·tailwind css
eokred1 小时前
图片预览组件的另一种设计:Headless、可组合、开箱即用
前端·react
南雨北斗1 小时前
解决web开发中前后端跨域通信(session失效问题)
前端
Y3815326621 小时前
body-upload-js
前端·javascript·浏览器·深拷贝·数据克隆