<!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高清晰度无损压缩 经常会用到把上传的大图片压缩,特别是体积,在微信等APP应用上,也默认都是有压缩的,那么,怎么样对图片大幅度压缩却仍能保持较高的清晰度呢? 压缩通常是有按比例缩放,和指定宽度压 ...

  2. iOS常用控件-UITableViewCell

    一. 封装cell: 1.加载xib文件的两种方式 <方式1> (NewsCell是xib文件的名称) NSArray *objects = [[NSBundle mainBundle] ...

  3. 笔记-python-standard library-11.2 os.path

    笔记-python-standard library-11.2 os.path 1.      os.path Source code: Lib/posixpath.py (for POSIX), L ...

  4. zeppelin之连接mysql

    上面的一篇文章,对于zeppelin的使用,只是我们对于数据存储在文件中,每一次对于当我们连接数据库的时候都会有问题,今天刚好 把这个问题解决今天我们刚好来介绍如何使用zeppelin来与数据进行连接 ...

  5. 1 Mongodb安装

    1.NoSQL简介 NoSQL,全名Not Only SQL,指的是非关系型的数据库 随着访问量的上升,网站的数据库性能出现了问题,于是NoSQL被设计出来了 优点.缺点 优点 高扩展性 分布式计算 ...

  6. django中间件CsrfViewMiddleware源码分析，探究csrf实现

    Django Documentation csrf保护基于以下: 1. 一个CSRF cookie 基于一个随机生成的值,其他网站无法得到.此cookie由CsrfViewMiddleware产生.它 ...

  7. 如何在react里嵌入iframe？

    无法访问iframe地址 index.js文件 import React from 'react'; import ReactDOM from 'react-dom'; import App from ...

  8. 使用Subversion进行源代码管理（二）：创建和发布版本库[转]

    原文出处: http://www.blogjava.net/youxia/archive/2007/10/23/155372.html 我的上一篇随笔讲了怎么使用Subversion客户端去连接服务器 ...

  9. 《Cracking the Coding Interview》——第17章：普通题——题目14

    2014-04-29 00:20 题目:给定一个长字符串,和一个词典.如果允许你将长串分割成若干个片段,可能会存在某些片段在词典里查不到,有些则查得到.请设计算法进行分词,使得查不到的片段个数最少. ...

  10. leetcode 【 Merge Two Sorted Lists 】 python 实现

    题目: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...