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

相关推荐
CheungChunChiu8 分钟前
Linux 内核动态打印机制详解
android·linux·服务器·前端·ubuntu
GIS之路1 小时前
GDAL 创建矢量图层的两种方式
前端
小目标一个亿2 小时前
Windows平台Nginx配置web账号密码验证
linux·前端·nginx
rocky1912 小时前
网页版时钟
前端·javascript·html
Aotman_2 小时前
Element-UI Message Box弹窗 使用$confirm方法自定义模版内容,修改默认样式
linux·运维·前端
计算机程序设计小李同学2 小时前
基于SSM框架的动画制作及分享网站设计
java·前端·后端·学习·ssm
一只小阿乐3 小时前
vue-web端实现图片懒加载的方
前端·javascript·vue.js
牛马1113 小时前
Flutter 多语言
前端·flutter
by————组态3 小时前
集成详细说明
前端·物联网·信息可视化·组态·组态软件
我是小疯子664 小时前
jQuery快速入门指南
前端