参考:

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. UVa 二分图匹配 Examples

    这些都是刘汝佳的算法训练指南上的例题,基本包括了常见的几种二分图匹配的算法. 二分图是这样一个图,顶点分成两个不相交的集合X , Y中,其中同一个集合中没有边,所有的边关联在两个集合中. 给定一个二分 ...

  2. 转：SQL Server 批量插入数据的两种方法

    在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍SQL Server支持的两种批量 ...

  3. 【Stage3D学习笔记续】真正的3D世界（二）：显示模型

    虽然我们进入真3D世界了,但是上一章的Demo仍然是显示的一个平面,尽管我们的平面在3D空间中旋转可以看出一点3D透视的效果,但是既然是真3D,就要拿出点3D的样子来! 如果要显示3D模型,我们就要告 ...

  4. vs2015 配置opencv3.0遇到的问题

    1.问题 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 C2872 "ACCESS_MASK": 不明确的符号 FaceFeature_GSF C:\Program Fi ...

  5. ios怎样实现快速将显卡中数据读出压缩成视频在cocos2dx扩展开发中

    如果解决ios怎样实现快速将显卡中数据读出压缩成视频在cocos2dx扩展开发中 手机平台性能是个关键问题. 压缩视频分成3个步骤: 读取显卡数据, 使用编码器压缩,保存文件. 使用libav 压缩的 ...

  6. 封装的分页jq

    (function ($) { $.fn.page = function (options) { var defaults = { divid: "pagediv", count: ...

  7. highcharts js报表工具(报表插件)

    highcharts报表工具(报表插件.图表工具) highcharts效果在线演示(可查看源代码):  http://www.hcharts.cn/demo/index.php?p=56 Highc ...

  8. V9最新手机门户域名绑定教程。

    如需要绑定域名为wap.domain.com,作下如操作: 一.把wap.domain.com域名绑定到你的这个网站主机上.二.在网站后台模块>手机门户域名里面填写“http://wap.dom ...

  9. eclipse安装android sdk后工具栏没有图标的设置

    如果没有出现这android图标,选择'Window>Customize Perspective...>Commands',并在'Available command groups'中勾选' ...

  10. JAVA获取CLASSPATH路径--转

    ClassLoader提供了两个方法用于从装载的类路径中取得资源: public URL getResource(String name);         public InputStream ge ...