mix-blend-mode实现图片模糊渐变

功能要求：先上效果图
1.实现图片从清晰到模糊

代码：
HTML：

   <div class="headerBG">
         <img src="https://img13.360buyimg.com/cms/jfs/t1/24324/23/2775/179927/5c2188e0E37d57889/4a706d3298ca14e0.jpg" alt="">
         </div>

CSS：

     .headerBG{
         position: fixed;
        
         top: 0px;
         left: 0px;
         z-index: -5;
         background-image: linear-gradient(bottom,rgba(255,255,255,1),rgba(255,255,255,0));
         img{
              mix-blend-mode: overlay;
              width: 100%;
         }
     }