小程序 h5 实现文字底部背景毛玻璃效果

如上图所示效果

代码如下:

HTML:
 <div class="container">
   <img class="main-img" src="img.jpg" />
   <div class="blur-wrap">
     <img src="img.jpg">
   </div>
   <h4>标题内容标题内容标题内容标题内容</h4>
 </div>

 CSS: 
  .container {
    position: relative;
    width: 320px;
    height: 200px;
  }

  .main-img {
    width: 100%;
    height: 100%;
  }

  .blur-wrap {
    position: absolute;
    bottom: 0;
    height: 44px;
    width: 100%;
    overflow: hidden;
  }

  .blur-wrap img {
    position: absolute;
    bottom: 0;
    width: 320px;
    height: 200px;
    filter: blur(4px);
    transform: scale(1.2);
  }

  h4 {
    position: absolute;
    bottom: 0;
    color: #fff;
  }

 

关键在于 用两个 img 来完成效果! 一个当前景,一个当背景,背景包一层div(view)容器的voerflow:hidden!