zoukankan      html  css  js  c++  java
  • css实现毛玻璃效果

    效果图如下:

     

    1.html代码

    <div class="mainHolder">
      <div class="textHolder">
        <p>this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass</p>
      </div>
    </div>

    2.css

    * {
       box-sizing: border-box;
     }
     .mainHolder {
       width: 100%;
       height: 100%;
       background-image: url(1.jpg);
       background-attachment: fixed;
       background-position: center;
       background-size: cover;
       position: relative;
     }
     .textHolder {
       width: 400px;
       height: 600px;
       position: absolute;
       left: 33%;
       top: 20%;
       background: inherit;
       overflow: hidden;
     }
     .textHolder::before {
       content: '';
       position: absolute;
       top:0;
       right: 0;
       bottom: 0;
       left: 0;
       background: inherit;
       background-attachment: fixed;
       filter: blur(4px);
     }
     .textHolder::after {
       content: "";
       position: absolute;
       top:0;
       right: 0;
       bottom: 0;
       left: 0;
       background: rgba(0, 0, 0, 0.25);
     }
     p {
       z-index: 1;
       color: white;
       position: relative;
       margin: 0;
     }

    参考---https://www.cnblogs.com/shuihanxiao/p/11777536.html

  • 相关阅读:
    startup毕业论文
    LeetCode OJ
    LeetCode OJ
    LeetCode OJ
    LeetCode OJ
    LeetCode OJ
    install
    逻辑卷(lv)管理(LVM)
    mke2fs
    cat & 文件结束符
  • 原文地址:https://www.cnblogs.com/pwindy/p/15649210.html
Copyright © 2011-2022 走看看