很久没来更新博客了,今天正好比较闲,就写一篇手头项目上遇到的一个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. Spark:一个高效的分布式计算系统

    概述 什么是Spark ◆ Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用的并行计算框架,Spark基于map reduce算法实现的分布式计算,拥 ...

  2. c#.net 使用NPOI导入导出标准Excel (asp.net winform csharp)

    尝试过很多Excel导入导出方法,都不太理想,无意中逛到oschina时,发现了NPOI,无需Office COM组件且不依赖Office,顿时惊为天人,怀着无比激动的心情写下此文. 曾使用过的方法 ...

  3. TinyPNG---一个压缩PNG的神站

    如何把网页中要用到的图片压缩到最小,这是前端攻城师们在写网页时都会考虑的一个问题,今天小坊给各位带来了给前端攻城师们真正的良心网站---TinyPNG. 只需要简单的两步就可以把你要压缩的PNG格式图 ...

  4. 机器数据的价值 - Web 访问日志和数据库审计日志

    计算机数据 大量的数据流,不断增长的来源,蕴含着巨大的价值 在 Splunk,我们大量谈及计算机数据.这些数据是指在数据中心.“物联网”和互联设备世界中运行的所有系统产生的数据.其中包括支撑组织的应用 ...

  5. android双击返回键退出程序的实现

    /** * 菜单.返回键响应 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-gen ...

  6. jenkins打包成功,部署失败

    环境一直正常,更新了tomcat版本后自动部署报错 ERROR: Publisher hudson.plugins.deploy.DeployPublisher aborted due to exce ...

  7. Learning The Bash Shell读书笔记(整理)

    最近搞了一本书 Learning Bash Shell,发现有人已经写了阅读笔记,我就在这边整理一下 来自blog:http://blog.sina.com.cn/n4mine Learning Th ...

  8. SQL Server 2008 R2——T-SQL 存储过程 返回表

    ==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...

  9. mongodb的备份

    转载请附原文链接:http://www.cnblogs.com/wingsless/p/5672057.html mongodb现在为止还是没有像XtraBackup这样好用的备份工具,因此一般来说会 ...

  10. Java设计模式 - 适配器模式

    概念: 将一个类的接口,转换成客户期望的另一个接口.适配器模式让原来接口不兼容的类可以在一起工作. 解决的问题: 提供类似于中间人的作用:把原本不兼容.不能一起工作的接口组合在一起,使得它们能够在一起 ...