最近学习发现一个background-blend-mode，这是CSS的一个新成员吧！这里分享记录一下

本文链接：https://blog.csdn.net/DJCBPL/article/details/138484413

介绍

background-blend-mode CSS 属性定义该元素的背景图片，以及背景色如何混合。

混合模式应该按background-image CSS 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。在所有的元素中。在SVG，它适用于容器元素、图形元素和图形引用元素。它也适用于::first-letter和::first-line。

语法

默认值是 normal

background-blend-mode = 
  <mix-blend-mode>#  
  
/* 单个值 */
background-blend-mode: normal;

/* 多个值，每个背景一个值 */
background-blend-mode: hue, luminosity;

background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

blend-mode一个定义混合的模式，可以有多个值，用逗号间隔。如：url(“logo.png”), url(“logo2.png”)

示例

<div id=“logo”></div>
<style type="text/css">
#logo{
  width: 250px;
  height: 70px;
   background: url("logo.png"), url("logo.png");
  background-blend-mode: screen;
}
</style>