参考:

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. C# 产生随机密码

    using System.Web.Security var rawPassword = System.Web.Security.Membership.GeneratePassword(10,1) re ...

  2. 转载 asp.net中ViewState的用法详解

    转载原地址: http://www.jb51.net/article/73662.htm 在web窗体控件设置为runat = "server",这个控件会被附加一个隐藏的属性_V ...

  3. 转载SSIS中的容器和数据流—数据转换（Transformations）续

    数据挖掘请求 数据挖掘任务是SSIS中一个很重要的任务,它的思想来源于一些算法.数据挖掘请求运行数据挖掘请求,并将结果输出到数据流.它还可以添加一些预测新列,一些应用场合如下列举: 根据已知的一些列, ...

  4. Android Design 与 Holo Theme

    转载:http://www.geekpark.net/topics/179488 [核心提示] 提到 Android Design,很多人会做出”啊,知道,就是黑色的背景和灰蓝色的平的按钮嘛”,那么到 ...

  5. Delphi- 操作EXCEL

    因工作需要,需要到操作EXCEL,先了解一下怎么读取EXCEL这个,做了一个DEMO,备注在这里 一.读取EXCEL unit Unit1; interface uses Windows, Messa ...

  6. 自己写一个与startWith类似的判断方法

    package com.hanqi.lianxi; import java.util.Scanner; public class startWith {        //自己顶一个与startWit ...

  7. WinFrom 安装包制作

    1.添加安装向导项目打开文件系统界面,选择应用程序文件夹.在右侧右击->添加->文件,把程序需要的文件都添加进来. 2.右击程序集->创建快捷方式.右击快捷方式->属性窗口-& ...

  8. How to add “Maven Managed Dependencies” library in build path eclipse

    If you have m2e installed and the project already is a maven project but the maven dependencies are ...

  9. 模板 树链剖分BFS版本

    //点和线段树都从1开始 //边使用vector vector<int> G[maxn]; ],num[maxn],iii[maxn],b[maxn],a[maxn],top[maxn], ...

  10. Java算法实例集合

    这里是princeton搜集的算法课程Java示例.包括超过了100 Java个算法程序源码.Javadoc和测试数据.点击这里查看.