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

    <body>
        <div class="wrapper">
            <div class="pic">
                毛玻璃效果,毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果
            </div>
        </div>
    </body>
    .wrapper,.pic:before{
        background: url("http://www.officedoyen.com/uploads/allimg/150303/1-150303194244Q5.jpg") 0 / cover fixed;
    }
    
    .wrapper{
        text-align: center;
        padding: 100px;
        margin: 20px;
    }
    .pic{
        height: 550px;
        width: 550px;
        color: #fff;
        font-size: 20px;
        padding-top: 20px;
        background-color: rgba(255,255,255,0.5);
        margin: auto;
        position: relative;
        overflow: hidden;
        border-radius: 0.3em;
        z-index: 1;
    }
    
    .pic:before{
        content: '';
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: -30px;
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }
    毛玻璃效果,毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果
  • 相关阅读:
    红黑树
    二叉搜索树
    散列表
    快速排序
    堆排序
    归并排序
    插入排序
    Shell脚本之:函数
    Shell脚本之:退出循环
    ACM刷题之路(四)2018暑假实验室集训——深广搜专题题解
  • 原文地址:https://www.cnblogs.com/lisa-lin/p/5511243.html
Copyright © 2011-2022 走看看