参考:

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. Oracle Data Guard PING[ARC2]: Heartbeat failed to connect to standby ''. Error is 12514 故障分析

    朋友搭建的一套DG,折腾了很长时间,一直都是报如下错误: ORA-12514: TNS:listener does not currentlyknow of service requested in ...

  2. GPS两点的距离

    目前手头的一个项目要用到GPS地理定位信息,很自然的就需要知道两个地点之间的距离,于是上网找了一下,同样自然的就有一些算法贴出来..(网络真是帮了大忙,省得我再去翻几何书自己研究算法了!公式早都忘光了 ...

  3. linux中文设置

    近期出现用户发邮件乱码问题,前面服务器刚刚切换过来,忘了装中文字体了. 本地调试在windows环境下,所以每次看都好的,于是我看了下linux服务器的编码,果然默认的不是中文字体,所以在生成pdf的 ...

  4. ThinkPHP中URL解析原理，以及URL路由使用教程！

    几个概念: THINKPHP 是一个MVC框架,使用PATHINFO解析出分组名,模块名,方法名,以及参数. PATHINFO:就是 http://localhost/index.php/Home/I ...

  5. Java数据抓取经验【转载】

    本人担任职友集的java工程师五年,其中抓取数据占主要的一部分,抓取的信息只要有两部分,职位和简历,其中职位的抓取量为日均插入量为30万,更新量 为60万,抓取全国300多个人才网站.职友集(现在改名 ...

  6. 将图片序列保存为GIF文件

    http://stackoverflow.com/questions/11459568/issue-with-rebuilding-and-saving-gifs-using-tgifimage 将图 ...

  7. 代理模式及其在spring与struts2中的体现

    代理模式 代理模式有三个角色组成: 1．抽象主题角色:声明了真实主题和代理主题的共同接口. 2．代理主题角色:内部包含对真实主题的引用,并且提供和真实主题角色相同的接口. 3．真实主题角色:定义真实的 ...

  8. 文件和目录之设置用户ID和设置组ID

    与一个进程相关联的ID有6个或更多,它们如表4-4所示: 表4-4 与每个进程相关联的用户ID和组ID 实际用户ID                            我们实际上是谁 实际组ID ...

  9. 分享SVN的钩子代码［借鉴学习］pre-commit-post 钩子

      #/bin/bash REPOS=$1 TXN=$2 export HOME=/ export PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/us ...

  10. C#_delegate - example

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Dele ...