css demo —— filtercss设置滤镜有2个相关属性filterbackdrop-filterfilter在

css设置滤镜有2个相关属性

filter
backdrop-filter

filter在被设置的元素上应用过滤器，而给元素设置backdrop-filter时，比如元素A，那么如果A元素下有B元素，且A是透明的，则过滤器会应用在B元素上，下面用demo截图对比一下

初始A元素
A元素设置filter:blur(2px)
添加B元素，并设置A层级位于B上
给A元素设置backdrop-filter:blur(2px)
注释掉A元素的filter属性

代码如下

html部分

<html>

  <head>
    <link rel="stylesheet" href="./css/demo_3.css">
  </head>

  <body>
    <div class="box">innerText</div>
    <p>hello world</p>
  </body>

</html>

css部分

body {
  margin: 0;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #fff;

  %center-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  %center-in-parent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .box {
    //A 元素
    width: 500px;
    height: 400px;
    background-color: rgba(180, 177, 177, 0.7);
    border-radius: 10px;
    @extend %center-content;
    @extend %center-in-parent;
    // filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1;
  }

  p {
    //B元素
    @extend %center-in-parent;
    margin: 100px auto;
  }
}