参考:

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. Java foreach操作（遍历）数组

    语法: 我们分别使用 for 和 foreach 语句来遍历数组 运行结果: 练习: import java.util.Arrays; public class HelloWorld { public ...

  2. 总结一下ERP .NET程序员必须掌握的.NET技术

    总结一下ERP .NET程序员必须掌握的.NET技术,掌握了这些技术工作起来才得心应手   从毕业做.NET到现在,有好几年了,自认为只能是达到熟练的水平,谈不上精通.所以,总结一下,自己到底熟练掌握 ...

  3. Linux下JDK安装位置

    新手在Linux上安装JDK时,不知道应该将JDK安装在哪比较合适.首先简要了解下Linux中部分目录的作用. /bin---用来贮存用户命令./usr/bin 也被用来贮存用户命令.  /sbin- ...

  4. Python FTP多线程爆破脚本

    初学python, 自己编写了个FTP多线爆破小脚本代码很丑= = #!usr/bin/env python #!coding=utf-8 __author__='zhengjim' from ftp ...

  5. datagridview控件--导出Excel

    dataGridView控件可以说很方便的显示了数据,而且对于修改和删除数据也很方便,我在前面的一篇博客中写到了如何去绑定数据到该控件上dataGridView控件--绑定数据方法,今天我将如何将数据 ...

  6. [AngularJS] Accessible Button Events

    Often buttons need to be handled by JavaScript, and if done improperly it can lead to accessibility ...

  7. 《Java并发编程实战》第十一章 性能与可伸缩性 读书笔记

    造成开销的操作包含: 1. 线程之间的协调(比如:锁.触发信号以及内存同步等) 2. 添加�的上下文切换 3. 线程的创建和销毁 4. 线程的调度 一.对性能的思考 1 性能与可伸缩性 执行速度涉及下 ...

  8. 05---JSON学习（Java）

    一.简介         JSON:JavaScript对象表示法(JavaScript object Notation)         JSON是存储和文本交换信息的语法         JSON ...

  9. CSS_样式sample

    <!DOCTYPE HTML> <html> <head> <title>div浮动</title> <style type=&quo ...

  10. c++与c不太相同的一些地方2

    1.一般全局变量放到cpp 文件里面,而不是.h 里面.要不然容易乱套,这个乱几次就好了,先记住这样一种编码规范. 以为大家都引入就比较麻烦,但是实现起来就只有cpp里面才有.毕竟.h是要被包含的文件 ...