很久没来更新博客了,今天正好比较闲,就写一篇手头项目上遇到的一个css问题:

.mature .blur {
-webkit-filter:blur(25px);
-moz-filter:blur(25px);
filter: url(data:image/svg+xml;base64,77u/PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImJsdXIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjI1IiAvPjwvZmlsdGVyPjwvc3ZnPg==#blur);
filter: blur(25px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='25');
transition: 1s filter linear;
}

Firefox可以使用filter+svg实现blur效果,url参数中原本使用的是svg路径#blur,svg、css、js都在CDN中,但发现这个svg在FF中不工作,图片显示为纯黑色,ORZ...于是想到了用base64来转码这个svg文件:

<svg>
<filter id="blur">
<feGaussianBlur stdDeviation="25" />
</filter>
</svg>

在线转码:http://b64.io/

转好后还是老问题,有点莫名,g了下发现,svg tag需要增加文档类型:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="25" />
</filter>
</svg>

刷新页面,问题解决。

Firefox使用svg blur滤镜渲染图片的更多相关文章

  1. iOS给图片添加滤镜&使用openGLES动态渲染图片

    给图片增加滤镜有这两种方式: CoreImage / openGLES 下面先说明如何使用CoreImage给图片添加滤镜, 主要为以下步骤: #1.导入CIImage格式的原始图片 #2.创建CIF ...

  2. 使用CSS3滤镜让图片反转颜色

    CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...

  3. CSS滤镜让图片模糊(毛玻璃效果)实例页面

    <pre name="code" class="css">CSS代码: .blur { filter: url(blur.svg#blur); /* ...

  4. 使用GPUImage渲染图片教程

    使用GPUImage渲染图片教程 Prepare - 准备 GPUImage开源库并不像普通的开源库那样子,拖进你的工程中就可以用.以下将详细的告诉你如何将GPUImage导入到你的工程当中. 首先上 ...

  5. css滤镜让图片模糊

    .mhblur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(53px); /* Ch ...

  6. CSS滤镜让图片模糊(毛玻璃效果)

    CSS代码: .blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); ...

  7. Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景

    Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...

  8. canvas代替img渲染图片

    移动端用canvas代替img渲染图片,可以提高性能 var oImg = new Image(); oImg.src = url; oImg.onload = function(){ var cvs ...

  9. SVG如何做圆形图片

    SVG如何做圆形图片 2016年5月31日17:30:48 提到圆形图片,大家首先想到的一定是border-radius,但在SVG中这些方法很难起效,下面方法适合SVG中制作任意规则与不规则的图形. ...

随机推荐

  1. WPF之Binding深入探讨

    原文:http://blog.csdn.net/fwj380891124/article/details/8107646 1,Data Binding在WPF中的地位 程序的本质是数据+算法.数据会在 ...

  2. 每日Scrum(7)

    今天是小组用来写文稿的日子,包括软件需求分析报告,概要设计报告,详细设计报告,数据库设计报告,软件测试报告,各组员领取自己的任务然后完成~

  3. 旧项目如何切换到Entity Framework Code First

    Entity Framework Code First固然是好东西,然而如果是已经存在的旧有项目,如何简单方便的使用切换呢? 这里介绍一个VS的插件Entity Framework Power Too ...

  4. Servlet/JSP-07 Session应用

    Session应用 一. 避免表单重复提交 1. 表单重复提交的情况 ①在表单提交到一个 Servlet,而 Servlet 又通过请求转发的方式响应了一个 JSP 或者 HTML 页面,此时浏览器地 ...

  5. openstack-kilo--issue(九) heat stacks topology中图形无法正常显示

    ======声明======= 欢迎转载:转载请注明出处 http://www.cnblogs.com/horizonli/p/6186581.html ==========环境=========== ...

  6. Tomcat中取消断点

    启动tomcat时,myeclipse报错: This kind of launch is configured to openthe debug perspective when it suspen ...

  7. Windows下常用软件工具的命令

    Linux上主要操作是命令,懂一点linux知识的都知道,其实windows下边很多工具也是可以用命令来操作打开的,这样会提高效率,节省很多的时间.下边就记录一下常用的命令. 一.常用命令 1.远程桌 ...

  8. tools:context=".MainActivity的作用(转)

    android:layout_width="match_parent" android:layout_height="match_parent" android ...

  9. JAVA IO 以及 NIO 理解

    由于Netty,了解了一些异步IO的知识,JAVA里面NIO就是原来的IO的一个补充,本文主要记录下在JAVA中IO的底层实现原理,以及对Zerocopy技术介绍. IO,其实意味着:数据不停地搬入搬 ...

  10. POJ3463Sightseeing[次短路计数]

    Sightseeing Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 8707   Accepted: 3056 Descr ...