参考:

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

 .bg{

   background-image: url("cat.jpg");    /* 背景图 */

   background-position: center bottom;   /* 背景样式 */

   background-attachment: fixed;

   background-size: cover;

   height: 100%;

   font-size: 100%;

 }

 .glass{

   position: relative;                    /* 玻璃样式 */

   padding:;

   border-bottom: 1px solid;

   border-bottom-color: #ccc;

   border-bottom-color: rgba(255, 255, 255, 0.2);

   background-color: rgba(255, 255, 255, 0.2);

   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

   margin-left:100px;                     /* 玻璃图层 偏移&大小 */

   margin-top:50px;

   height: 500px;

   width: 800px;

 }

 .blur {

   background-image: url("cat.jpg");    /* 背景图 */

   height:500px;                         /* 模糊图层大小 */

   width: 800px;

   position: relative;                   /* 模糊图层样式 */

   padding:;

   background-position: center bottom;

   background-attachment: fixed;

   background-size: cover;

   font-size: 100%;

   /* 模糊滤镜 */

     filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

     -webkit-filter: blur(10px); /* Chrome, Opera */

        -moz-filter: blur(10px);

         -ms-filter: blur(10px);

             filter: blur(10px);

     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

 }

html

 <head>

 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

 <title>Glass Cat</title>

 <link rel="stylesheet" type="text/css" href="glass-cat.css" >

 </head>

 <body class="bg">

 <div id="glass" class="glass">

 <div id="blur" class="blur"></div>

 </div>

 </body>

 </html>

ok

【html】【16】高级篇--毛玻璃效果[模糊]的更多相关文章

  1. android 开发 - 对图片进行虚化（毛玻璃效果,模糊)

    概述 IPAD,IPHONE上首页背景的模糊效果是不是很好看,那么在 Android中如何实现呢.我通过一种方式实现了这样的效果. 开源库名称:anroid-image-blur 一个android ...

  2. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  3. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  4. MIUI 6的毛玻璃效果的技术实现（实时模糊）

    说说MIUI 6的毛玻璃效果的技术实现.   很久以前我们的文件夹打开和最近任务等几个地方就使用了毛玻璃效果,在技术上讲就是背景模糊.应该是比iOS 7的使用要早很多.不过那时候我们使用的是先对背景截 ...

  5. 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

    转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...

  6. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  7. ORM查询语言（OQL）简介--高级篇（续）：庐山真貌

    相关文章内容索引: ORM查询语言(OQL)简介--概念篇 ORM查询语言(OQL)简介--实例篇 ORM查询语言(OQL)简介--高级篇:脱胎换骨 ORM查询语言(OQL)简介--高级篇(续):庐山 ...

  8. PHP笔记（PHP高级篇）

    高级篇中将涉及数据库的使用以及Cookie和Session会话,提高PHP的开发效率和运行效率 PHP程序员需要掌握的MySQL操作 为项目设计表 使用SQL语句 MySQL的目录结构 data目录中 ...

  9. 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

随机推荐

  1. 射频识别技术漫谈(9)——动物标签HDX【worldsing笔记】

    半双工(HDX,Half Duplex)技术是ISO11784/11785中规定的另一种标签与读写器之间的通讯方式.读写器先打开射频场对标签充电以激活标签,然后关闭磁场,标签在读写器磁场关闭的情况下向 ...

  2. Android模拟器访问本地的apache tomcat服务

    1. 在官网http://tomcat.apache.org/上下载tomcat,根据自己的电脑下载相应的文件 2.将apache-tomcat-6.0.37-windows-x64.zip包解压到本 ...

  3. thinkPHP配置项

    'URL_PATHINFO_DEPR'=>'-',//修改URL的分隔符 'TMPL_L_DELIM'=>'<{', //修改左定界符 'TMPL_R_DELIM'=>'}&g ...

  4. java Swing图形化界面

    学过java的人应该对java的图形化界面很是反感,特别是接触java不久的人.如果想和其他语言那样用鼠标拖拽,可以使用wondosbulider插件.但是用起来也不是那么方便.当然对于不乐意写代码的 ...

  5. 关于 mysql.test 数据库

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  6. 如何调整 php 应用的上传附件大小？

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  7. Win8 安装Oracle 10g 提示“程序异常终止”的解决方案

    这段时间在做DRP,需要安装Oracle 10g的数据库,我的系统是win8企业版,安装Oracle 10g的时候,选择“高级安装”,提示“程序异常终止”,下面是几个解决方案,跟大家分享一下. 错误提 ...

  8. 彻底解决android读取中文txt的乱码（自动判断文档类型并转码

    原文:http://blog.csdn.net/handsomedylan/article/details/6138400 public String convertCodeAndGetText(St ...

  9. android学习日记19--四大组件之Services(服务)

    一个Android应用主要由四个基本组件组成,Android四大基本组件分别是Activity,Content Provider内容提供者,Service服务,BroadcastReceiver广播接 ...

  10. [Effective C++ --025]考虑写出一个不抛异常的swap函数

    引言 在我的上一篇博客中,讲述了swap函数. 原本swap只是STL的一部分,而后成为异常安全性编程的脊柱,以及用来处理自我赋值可能性. 一.swap函数 标准库的swap函数如下: namespa ...