css实现背景模糊且加蒙版

第一步

为父元素设置背景图background-image:url(‘xxx.png’)

第二步

为子元素设置backdrop-filter: blur(10px)

代码如下：

1、less部分

 .father {
      height: 330px;
      background-image: url('./xxx.jpg');
      position: relative;
      &:before {
	     content: '';
	     display: block;
	     height: 100%;
	     width: 100%;
	     background: rgba(0,0,0,0.15);
	     position: absolute;
	     z-index: 1;
       }
      .son {
          height: 100%;
          font-size: 40px;
          color: #fff;
          backdrop-filter: blur(10px);
          position: relative;
          z-index: 2;
      }
  }

2、html

<div className="father">
  <div className="son">我我我</div>
</div>

效果图：