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);
    }
    毛玻璃效果,毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果
  • 相关阅读:
    ORM中的事务和锁
    双下划线跨表查询 聚集查询 分组查询 FQ查询
    cookie和session
    多表查询
    单表查询
    ORM
    Djangon之模板
    Django之视图函数
    Django之URL路由系统
    web框架的本质及自定义web框架
  • 原文地址:https://www.cnblogs.com/lisa-lin/p/5511243.html
Copyright © 2011-2022 走看看