在uniapp中使用背景渐变色与背景图不生效问题

2023-12-27 19:48:27

list上有文字详情以及背景图，从背景可以看出是渐变色和?背景图片的结合。

因为使用到渐变色，所以要结合 background-blend-mode 属性来实现与背景图片叠加显示，否则只通过 background: linear-gradient(); background-image: url(); 设置不会生效，这样只能显示图片。

 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颜色）。
?

文章来源:https://blog.csdn.net/a99101/article/details/135252613
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。