css实现背景虚化

最终效果

实现原理

内容和背景图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对定位。

代码

html

<div class="container">
  <div class="bg"></div>
  <div class="bg-mask"></div>
  <div class="content">
    <img class="avatar" src="image/avatar.jpg">
    <div class="info">
      <p>我是文字</p>
    </div>
  </div>
</div>

scss

.container {
  position: relative;
  width: 400px;
  height: 300px;
  margin: 100px auto;
  overflow: hidden;
  .bg {
    height: 100%;
    background: url(./image/avatar.jpg) center center no-repeat;
    background-size: cover;
    filter: blur(10px);
  }
  .bg-mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
  }
  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .info{
      font-size: 14px;
    }
  }
}