css毛玻璃效果—附：子盒子背景跟随父盒子背景

今天写了一个毛玻璃效果的网页，再次进行总结：

HTML：

  <div class="whole">
    <div class="login">
      <div class="glass"></div>
      <div class="login-content"></div>
    </div>
  </div>

CSS：

//最外层父盒子用来作为全屏背景
.whole {
  background-image: url("../assets/img/cbg.png");
  //图像居中
  background-position: center center;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  }

这里background-attachment: fixed;是与子盒子的background: inherit;搭配使用，使子盒子移动到哪儿就看到父盒子背景的哪儿（相当于子盒子的背景与子盒子盖住的背景重合，呈现出透明的效果，既然子盒子是透明效果那就干脆不给它写背景呗，其实这里使用这个是因为毛玻璃效果需要，如果不设置背景毛玻璃不显示）

  .login {
    border-radius: 15px;
    position: absolute;
    //继承whole 的对应位置的背景
    background: inherit;
    //居中
    top: calc(50% - 150px);
    left: calc(50% - 250px);
    width: 500px;
    height: 300px;
    text-align: center;
    //隐藏超出的毛玻璃，实现有边框的效果
    overflow: hidden;

这里还有一个知识点，即实现网页居中效果：` top: calc(50% - 150px);

left: calc(50% - 250px);` 括号内减去的分别是高度，宽度的一半

    //毛玻璃
    .glass {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
         //继承login的背景
      background: inherit;

      filter: blur(5px);
      //使毛玻璃超出父盒子login
      margin: -30px;
    }

//毛玻璃上的内容
.login-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  }

效果展示：

注：为图简约，login-content内的代码我这里没写，在里面写上代码后就是上述效果