SOURCE

<div class="box">
    <div class="filter-box"></div>
    <div class="content-box">
        <div class="txt">这是一行字</div>
    </div>
</div>

.box{
  position: fixed;
  background: #f1f1f1;
  height: 100vh;
  width: 100vw;
}  
.filter-box{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.content-box{
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    margin: auto;
    width: 500px;
    height: 500px;
  background:yellow;
}
.filter-box::before,
.filter-box::after,
.content-box::before,
.content-box::after{
    position: absolute;
    content: '';
    opacity: 0.8;
    background-color: #fff;
    z-index: 2;
    pointer-events: none;
}
.filter-box::before,
.filter-box::after{
  width: 150px;
  height: 150px;
  top: 0;
}
.filter-box::before{
  left: 0
}
.filter-box::after{
  right: 0;
}
.content-box::before,
.content-box::after{
  left: 0;
  width: 100%;
  height: 150px;
}
.content-box::before{
  top: -150px;
}
.content-box::after{
  bottom: -150px;
}
.txt{position:relative;top: 0px;left: -100px}