zoukankan      html  css  js  c++  java
  • 【html】【16】高级篇--毛玻璃效果[模糊]

    参考:

    http://www.zhangxinxu.com/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8%BD%AC%E6%8D%A2%E6%88%90%E6%A8%A1%E7%B3%8A%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/

    下载:

    http://download.csdn.net/detail/a393464140/7105685

    效果:

    css

     1 .bg{
     2   background-image: url("cat.jpg");    /* 背景图 */
     3   
     4   background-position: center bottom;   /* 背景样式 */
     5   background-attachment: fixed;
     6   background-size: cover;
     7   height: 100%;
     8   font-size: 100%;
     9 }
    10 .glass{
    11   position: relative;                    /* 玻璃样式 */
    12   padding: 0;
    13   border-bottom: 1px solid;
    14   border-bottom-color: #ccc;
    15   border-bottom-color: rgba(255, 255, 255, 0.2);
    16   background-color: rgba(255, 255, 255, 0.2);
    17   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    18   
    19   margin-left:100px;                     /* 玻璃图层 偏移&大小 */
    20   margin-top:50px;
    21   height: 500px;
    22   width: 800px;
    23 }
    24 .blur {    
    25   background-image: url("cat.jpg");    /* 背景图 */
    26 
    27   height:500px;                         /* 模糊图层大小 */
    28   width: 800px;
    29   
    30   position: relative;                   /* 模糊图层样式 */
    31   padding: 0;
    32   background-position: center bottom;
    33   background-attachment: fixed;
    34   background-size: cover;
    35   font-size: 100%;
    36   
    37   /* 模糊滤镜 */
    38     filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    39     
    40     -webkit-filter: blur(10px); /* Chrome, Opera */
    41        -moz-filter: blur(10px);
    42         -ms-filter: blur(10px);    
    43             filter: blur(10px);
    44     
    45     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
    46 }

    html

     1 <head>
     2 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
     3 <title>Glass Cat</title>
     4 <link rel="stylesheet" type="text/css" href="glass-cat.css" >
     5 </head>
     6 <body class="bg">
     7 
     8 <div id="glass" class="glass">
     9 <div id="blur" class="blur"></div>
    10 </div>
    11 </body>
    12 </html>

    ok

  • 相关阅读:
    计算机网路知识的简单介绍
    计算机的发展史及多道技术
    计算机基础知识
    Flask学习【第11篇】:整合Flask中的目录结构
    Flask学习【第10篇】:自定义Form组件
    Flask学习【第9篇】:Flask-script组件
    Flask学习【第8篇】:flask-session组件
    Flask学习【第7篇】:Flask中的wtforms使用
    Flask学习【第6篇】:Flask中的信号
    Flask学习【第4篇】:用Flask的扩展实现的简单的页面登录
  • 原文地址:https://www.cnblogs.com/aiqingqing/p/5041409.html
Copyright © 2011-2022 走看看