高斯模糊背景图

效果图： 

代码：

<template>
  <div>
    <div class="suit">
      <div class="figure"></div>
      <div class="modal">
        <div class="cont">
          <img src="../assets/face.png" alt />
          <p>星语心愿</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {}
};
</script>
<style>
/* 原理：一个父盒子包裹两个子盒子（大小一样大），第一个子盒子控制背景图的显示以及滤镜效果（放大海报的一个角落+高斯模糊），
  第二个子盒子则负责显示内容（黑色半透明蒙版的效果），然后利用子绝父相，让第二个子盒子定位根据父盒子进行定位到第二个子盒子上面*/
.suit {
  position: relative;
  overflow: hidden;
}
.figure {
  background: url(http://www.imaoda.com/s/img/github/21.jpg);
  /* 放大背景图 */
  background-size: 200%; 
  height: 200px;
  width: 400px;
  /* 加滤镜，以及设置模糊程度 */
  filter: blur(16px);
}
.modal {
  position: absolute;
  height: 200px;
  width: 400px;
  top: 0px;
  left: 0px;
  /* 背景色透明度 */
  background: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
}
.cont {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.cont p {
  width: 30%;
}
.cont img {
  display: block;
  width: 50%;
  height: 100%;
}
</style>