CSS3 blur滤镜实现
如下测试代码:

.blur {
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}

相关HTML代码如下:

<img src="mm1.jpg" />
<img src="mm1.jpg" class="blur" />

需要注意目前火狐不支持,其他些浏览器,如FireFox到目前还没有支持CSS3 filter. 当然,要实现(比方说)FireFox 24浏览器上照片变模糊的效果,也是可以的。可以使用SVG的模糊滤镜。
新建文命名为blur.svg的SVG文件:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
baseProfile="full">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</defs>
</svg>

如下CSS调用代码:

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

完整的css代码

.blur {
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 */
}

css3毛玻璃模糊效果的更多相关文章

  1. css3毛玻璃效果白边问题

    注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...

  2. 解决css3毛玻璃效果(blur)有白边问题

    做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: <body> <div class="login-wrap"> <div class= ...

  3. 实现毛玻璃模糊效果/DRNRealTimeBlur

    四种方法:1.美工出图  2.coreImage框架,高斯效果 3.ToolBar,覆盖在view上边 //1.添加图片 self.imageView.image = [UIImage imageNa ...

  4. CSS3 之filter毛玻璃效果弹窗

    先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  5. android 获取当前屏幕作为毛玻璃模糊背景Acitivity作为弹出框。

    使用: 1.在执行弹出界面前,先将其当前屏幕截图. BlurBuilder.snapShotWithoutStatusBar(getActivity()); 2.为了确保界面切入无效果. startA ...

  6. 【原】iOS优秀开源项目总结

    网上此类帖子博客不少,不过自己没整理过的东西始终是别人,现开此贴加以总结,持续更新!站在巨人的肩膀上才能站得高看得远. 第一部分:UI类 1.毛玻璃模糊效果 RNFrostedSidebar 一个iO ...

  7. 10款让人惊叹的HTML5/jQuery图片动画特效

    1.HTML5相册照片浏览器 可连接Flickr照片服务 以前我们经常会分享一些jQuery相册浏览插件,效果不错,实用性也很强.不过如果能利用HTML5来实现相册浏览器,那么相册浏览效果肯定会更加炫 ...

  8. html10个特效(转载)

    http://www.html5tricks.com/10-html5-jquery-image-animatin.html 现在网页上的图片已经不再是10几年前那种低像素的静态图片了,有了HTML5 ...

  9. IOS设备设计完整指南

    作为初学者,常常不知如何下手设计,IOS应用UI设计中碰到的种种基础小问题,在此都将一一得到解答.这份完整的设计指南将带你快速上手,为IOS设计出优雅的应用吧. 关于此设计指南 此设计指南描述的是如何 ...

随机推荐

  1. 乘积最大洛谷p1018

    题目描述 今年是国际数学联盟确定的“2000――世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的数学智力竞赛的活动,你的一个好朋友XZ也有幸得 ...

  2. Nginx如何配置虚拟主机?

    注意,该环境是依赖于http://www.php20.com/forum.php?m ... &extra=page%3D1 基础上进行配置.默认不具备这些文件 .下面是增加一个mytest点 ...

  3. ASP.NET Core远程调试

    关于ASP.NET Core远程调试的具体做法可参考微软文档——Remote Debug ASP.NET Core on a Remote IIS Computer in Visual Studio ...

  4. 关于C#中函数的认识

    对于C#语言中的函数,大概分之为函数的声明及其调用. 函数的声明: 1.函数的声明是指给一段代码取名称. 2.函数的声明位置必须在类中. 3.函数声明的语法: 函数声明的语法:static void ...

  5. 多线程编程学习笔记——async和await(二)

    接上文 多线程编程学习笔记——async和await(一) 三.   对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...

  6. 并发与并行的区别 The differences between Concurrency and Parallel

    逻辑控制流 在程序加载到内存并执行的时候(进程),操作系统会通过让它和其他进程分时段占用CPU(CPU slices)让它产生自己独占CPU的假象(同时通过虚拟内存让它产生独占内存的假象).在CPU在 ...

  7. 使用Mybatis-Generator自己主动生成Dao、Model、Mapping相关文件

    准备工作: 1.数据库驱动程序 2.generatorConfig驱动,(下载地址:https://github.com/mybatis/generator/releases) 3.generator ...

  8. MyBatis_多查询条件问题

    一.多查询条件无法整体接收问题的解决 在实际工作中,表单中所给出的查询条件有时是无法将其封装成一个对象,即查询方法只能携带多个参数,而不能携带将这多个参数进行封装的一个对象.对于这个问题,有两种解决方 ...

  9. 配置nginx以获取真实的客户端ip地址

    当我们使用了nginx来转发客户端的请求以后,tomcat是无法正确获取到客户端的ip地址的,而是获取到配置了nginx的那台服务器的ip地址.因为tomcat所接收到的请求是通过nginx发出来的( ...

  10. 自学Zabbix3.10.1.5-事件通知Notifications upon events-媒介类型自定义脚本

    自学Zabbix3.10.1.5-事件通知Notifications upon events-媒介类型自定义脚本