<pre name="code" class="css">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 */
}
HTML代码:
<img src="mm1.jpg" />
<img src="mm1.jpg" class="blur" />



原文地址:http://www.zhangxinxu.com/study/201311/css-filter-image-blur.html
												

CSS滤镜让图片模糊(毛玻璃效果)实例页面的更多相关文章

  1. CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

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

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

  3. css滤镜让图片模糊

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

  4. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  5. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  6. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  7. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  8. 运用CSS高斯模糊添加图片加载效果

    <!DOCTYPE html> <html> <head> <title>大图片加载从模糊到清晰</title> </head> ...

  9. css 设置背景图片模糊,内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

随机推荐

  1. webpack图片的路径与打包

    转的http://www.cnblogs.com/ghost-xyx/p/5812902.html 今天写 react遇到打包图片,之前都是通过url在css里,没遇到问题,今天在 react里直接用 ...

  2. Oracle左连接、右连接、全外连接

    Oracle  外连接 (1)左外连接 (左边的表不加限制)(2)右外连接(右边的表不加限制)(3)全外连接(左右两表都不加限制) 外连接(Outer Join) outer join则会返回每个满足 ...

  3. 将文件放到Android模拟器的SD卡中的两种解决方法

    两种方式:一.窗口界面操作1.打开DDMS页面2.打开File Explorer页,如果没有,在Window --> Show View -->File Explorer3.一般就在mnt ...

  4. 静态查找_Search

    #include <stdio.h> #define MAXSIZE 50 #define OK 1 #define ERROR 0 int F[MAXSIZE];//斐波那契数列 int ...

  5. hdu 1010 Tempter of the Bone(dfs暴力)

    Problem Description The doggie found a bone in an ancient maze, which fascinated him a lot. However, ...

  6. hdu4135Co-prime 容斥原理水题

    //问一个区间[a,b]与n互素的数的个数 //利用容斥原理可知 //在[a,b] 区间内对n的素数因子 //ans = 被一个数整除的数的个数 - 被两个数的最小公倍数整除的数的个数 + 被三个数的 ...

  7. mongodb 学习笔记 04 -- 游标、索引

    游标 var cursor = db.collectionName.find() 创建游标 cursor.hasNext() 是否有下一个元素 cursor.next() 取出下一个元素 比如 whi ...

  8. UILabel,UITextField 以及UIButton应用

    </pre><pre name="code" class="cpp">一.UILabel 它是ioS开发使用的控件来显示文本,它是UIV ...

  9. UI设计师不可不知的安卓屏幕知识

    不少设计师和工程师都被安卓设备纷繁的屏幕搞得晕头转向,我既做UI设计,也做过一点安卓界面布局,刚好对这块内容比较熟悉,也曾在公司内部做过相关的讲座,在此,我将此部分知识重新梳理出来分享给大家! 1.了 ...

  10. ORACLE AWR概述及生成AWR报告

    1.Overview of the Automatic Workload Repository The Automatic Workload Repository (AWR) collects, pr ...