SOURCE

<div class="box">
  <!-- 需要设置模糊的元素 -->
  <div class="blur">
    <div class="content">
      <p>所爱穿山海</p>
      <p>山海皆可平</p>
    </div>
  </div>
</div>

.box {
  margin: 30px;
  padding: 20px;
  width: 200px;
  height: 200px;
  border: 2px solid skyblue;
}

/* 需要设置模糊的元素 */

.blur {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  color: black;
  text-align: center;
}

/* 对其伪元素设置模糊 */

.blur::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(http://oz2tkq0zj.bkt.clouddn.com/17-11-23/47989246.jpg) no-repeat center center;
  background-size: cover;
  content: '';
  filter: blur(7px);
}

/* 其余元素需要设置 position: relative; */

.content {
  position: relative;
}