<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<style>

	*{

		margin: 0;

		padding: 0;

		list-style: none;

	}

	.box{

		width: 100%;

		height: 300px;

	}

	.box img{width: 100%}

	.blur {

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

	    -webkit-filter: blur(40px); /* Chrome, Opera */

	       -moz-filter: blur(40px);

	        -ms-filter: blur(40px);

	            filter: blur(40px);

	    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

	}

</style>

<body>

	<div class="box">

		<img src="1.jpg" alt="">

		<img src="1.jpg" alt="" class="	blur">

	</div>

</body>

</html>

　　

css 实现高斯模糊的更多相关文章

  1. 用原生css实现高斯模糊、黑白等滤镜效果

    —引导— 在CSS3中,有一个强大的属性,那就是filter属性,filter顾名思义就是“滤镜”的意思,用filter属性可以让图片无需PS处理就达到一些简单的显示效果. —定义和使用— filte ...

  2. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. CSS Blur() 将高斯模糊应用于输出图片

    一.Css  Blur() blur() CSS 方法将高斯模糊应用于输出图片. 结果为 <filter-function>. blur(radius) radius模糊的半径,值为< ...

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

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

  5. css样式，高斯模糊

    .blur-container.blur-3 { --bg: url("background.jpg"); background-image: var(--bg); } .blur ...

  6. CSS过滤器

    CSS过滤器(CSS filters)最初是为了向SVG矢量图提供不同的图片效果.现在,CSS filters 不在局限于在SVG中使用,也可以在图片.文字和其它元素上使用.CSS过滤器效果并不难理解 ...

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

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

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

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

  9. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

随机推荐

  1. Can't connect to local MySQL server through socket '/tmp/mysql.sock'

    今天在连接mysql的时候出现了上面的错误, 很明显原因找不到/socket 文件 查了半天才发现原来是mysql没有开启 service  mysqld  start 开启之后在/tmp/目录下回自 ...

  2. easyPOI导出excel报错

    http-nio--exec- at :: - excel cell export error ,data is :com.jn.ssr.superrescue.web.qc.dto.Automati ...

  3. [BZOJ2734][HNOI2012] 集合选数（状态压缩+思维）

    Description 题目链接 Solution 可以根据条件构造出一个矩阵, 1 3 9 27 81... 2 6 18.... 4 12 36... 这个矩阵满足\(G[i][1]=G[i-1] ...

  4. [Bzoj3611]大工程（虚树+DP）

    Description 题目链接 Solution 在虚树上跑DP即可 关于虚树的建立,是维护一个最右链的过程 关键代码如下: sort(A+1,A+k+1,cmp);//按dfs序排序 s[top= ...

  5. python基础之模块part2

    sys: sys模块不同于os模块,这个是跟Python解释器打交道的. sys.argv:返回一个文件名开头,包含后面输入内容的 列表 import sys res = sys.argv print ...

  6. JS：关于JS字面量及其容易忽略的12个小问题

    简要 问题1:不能使用typeof判断一个null对象的数据类型 问题2:用双等号判断两个一样的变量,可能返回false 问题3:对于非十进制,如果超出了数值范围,则会报错 问题4:JS浮点数并不精确 ...

  7. ARabevaluator 颜色渐变控制类

    参考资料: http://blog.csdn.net/qq_33456552/article/details/52092865 实现渐变效果: ArgbEvaluator argbEvaluator; ...

  8. Android获取状态栏的高度：

    方法一: //获取手机状态栏高度 public static int getStatusBarHeight(Context context){ Class<?> c = null; Obj ...

  9. AOP的两种实现方式

    技术交流群 :233513714 AOP,面向切面编程,可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术.    Aspect Oriented Progr ...

  10. Spark 的情感分析

    Spark 的情感分析 本文描述了基于 Spark 如何构建一个文本情感分析系统.文章首先介绍文本情感分析基本概念和应用场景,其次描述采用 Spark 作为分析的基础技术平台的原因和本文使用到技术组件 ...