<!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. php扩展开发-全局变量

    //php_myext.hZEND_BEGIN_MODULE_GLOBALS(myext) unsigned long counter;//在这里定义需要的全局变量,可以多个,每个变量一行, ZEND ...

  2. [C#]常用开源项目

    [转][C#]常用开源项目 本文来自:http://www.cnblogs.com/sunxuchu/p/6047589.html Json.NET http://www.newtonsoft.com ...

  3. python基础之正则表达式爬虫应用，configparser模块和subprocess模块

    正则表达式爬虫应用(校花网) 1 import requests 2 import re 3 import json 4 #定义函数返回网页的字符串信息 5 def getPage_str(url): ...

  4. Hadoop(初始Hadoop)

    Hadoop核心组件 1.Hadoop生态系统 Hadoop具有以下特性: 方便:Hadoop运行在由一般商用机器构成的大型集群上,或者云计算服务上 健壮:Hadoop致力于在一般商用硬件上运行,其架 ...

  5. NPM安装vue-cli，并创建vue+webpack项目模板

    1.安装npm npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install  估计会非常慢,我们可以使用淘宝NPM镜像下载安装:htt ...

  6. 对于STM32别名区的理解 （转载）

    1. 什么是位段.位带别名区? 2. 它有什么好处? 答1: 是这样的,记得MCS51吗? MCS51就是有位操作,以一位(BIT)为数据对象的操作,       MCS51可以简单的将P1口的第2位 ...

  7. Entity FrameWork和Dapper的使用

    EF是微软系列下的更正苗红的重量级的ORM框架,功能强大,操作数据库的时候几乎不用写sql,可以像写C#代码一样操作数据库,尤其支持多表关联操作的时候极为方便,但是生成的sql语句性能很差,实在不敢恭 ...

  8. centos使用--防火墙

    目录 1 切换到zsh 1.1 查看系统当前的shell 1.2 查看bin下是否有zsh包 1.3 安装zsh包 1.4 切换shell至zsh 2 安装oh-my-zsh 2.1 oh-my-zs ...

  9. Apache Spark 2.2.0 中文文档

    Apache Spark 2.2.0 中文文档 - 快速入门 | ApacheCN Geekhoo 关注 2017.09.20 13:55* 字数 2062 阅读 13评论 0喜欢 1 快速入门 使用 ...

  10. 常用模块（string）

    import string# dt = string.digits # 获取0-9的数字# dt = string.ascii_letters # 获取所有的大小写字母# dt = string.he ...