<!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. mount加载虚拟机增强工具步骤

    1.创建一个挂载目录sudo mkdir /mnt/cdrom 2.在C:\Program Files\Oracle\VirtualBox\VBoxGuestAdditions.iso中添加该文件 3 ...

  2. mysql学习第三天笔记

    连接连接是在多个表之间通过一定的连接条件,使表之间发生关联,进而能从多个表之间获取数据.在 WHERE子句中书写连接条件. 如果在多个表中出现相同的列名,则需要使用表名作为来自该表的列名的前缀. N个 ...

  3. 使用泛型类简化ibatis系统架构

    jdk1.5的推出为我们带来了枚举.泛型.foreach循环.同步工具包等等好东西.其中,泛型的使用为我们的代码开发提供了很大的简便,简化了我们的代码. 1.设计思路 1)GenericDao泛型类提 ...

  4. 小白日记1：kali环境Wpscan渗透Wordpress

    一.什么是Wpscan?什么是Wordpres? 1.Wpscan WPScan是一款针对wordpress的安全扫描软件:可以扫描出wordpress的版本,主题,插件,后台用户以及爆破后台用户密码 ...

  5. Django的Field（字段）

    字段 1.models.AutoField 自增列 = int(11) 如果没有的话,默认会生成一个名称为 id 的列,如果要显示的自定义一个自增列,必须将给列设置为主键 primary_key=Tr ...

  6. Windows下python 3 pip程序升级异常问题及pip常用命令

    最近在学习,Selenium+Python自动化,在安装selenium包的时候,出现无法安装的情况,并提示Pip有新的版本,我的版本太低了.然后安装系统提示操作,pip升级也出现异常,报错timeo ...

  7. 【转载】Unity3D研究院之IOS触摸屏手势控制镜头旋转与缩放

    前几篇文章介绍了很多Unity3D引擎自身的一些问题, 今天我们在回到IOS设备上讨论一些触摸屏幕手势,本章的目标是通过触摸iPhone屏幕手势 实现模型左右的旋转,与模型的缩放. 大家想一想模型的旋 ...

  8. 【PTA】Tree Traversals Again

    题目如下: An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For e ...

  9. 【转】Unity3D 关于贝赛尔曲线,平滑曲线,平滑路径,动态曲线

    http://tieba.baidu.com/p/2460036481 很多时候我们需要的并不是直线和折线,而是平滑的曲线,比如寻路系统,某些物体的曲线运动,都需要平滑曲线来保证效果,今天试了一下,通 ...

  10. web自动化测试：watir+minitest（五）

    测试报告: 加载minitest-reporters库,并设置相关的参数.既可以在每次运行测试后生成响应的测试报告. 默认会生成一份html的报告在当前目录的test目录下 我们可以指定参数对报告的标 ...