css实现透明模糊效果

• 先上效果图

  
  
  image.png

就是一般的活动弹框，背景透明+模糊，内容是图片

• 代码
  html

<div class="event-box">
  <div class="root-inner">
    <div class="content">
      <img src="content.png" alt="">
    </div>
  </div>
</div>

css:

.box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .root-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(2px) brightness(50%);
    background-color: rgba(0, 0, 0, .1);
    .content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        max-height: 80%;
      }
    }
  }
}