css 实现高斯模糊

<!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" >
		<img src="1.jpg"  class="	blur">
	</div>
</body>
</html>

时间： 2024-07-31 20:06:34

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

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

一.Css Blur() blur() CSS 方法将高斯模糊应用于输出图片. 结果为 <filter-function>. blur(radius) radius模糊的半径,值为<length>. 它定义了高斯函数的标准偏差值,即屏幕上有多少像素相互融合; 因此,较大的值会产生更多模糊. 值为0会使输入保持不变. 该值为空则为0. blur(0) /* No effect */ blur(8px) /* Blur with 8px radius */ blur(1.17rem)

CSS学习——基础分类整理

1. CSS 层叠样式表:Cascading Style Sheets,定义如何显示html元素 CSS规则:选择器{属性:值; 属性:值;} CSS注释:/*在这里写注释说明*/ 2. 选择器 #元素id 用元素的id属性来设置 .className 用html的class属性来设置 p.className p元素,且class="className" div p 后代选择器(空格分隔):div内的所有p div>p 子元素选择器(>分隔):div的直接子元素 div+p

Web前端之高斯模糊图片记

题记前端需求之高斯模糊图片最近工作中有一个需求,客户提交图片,服务器根据图片生成内容,并将内容显示,要求高斯模糊处理用户的图片并作为作品展示的背景,类似于苹果设备上的高斯模糊背景.用户提交的图片分网络图片地址.终端设备上传两种.要求兼容各大浏览器. 解决方案一:CSS3滤镜在CSS3 中规定了一个新的图形特效:filter ,可以对元素进行模糊.锐化或者元素变色. filter 目的是用来调整图片.背景和边界的渲染. 在CSS3 中已经实现了filter 的一些预定义函数,MDN 中介绍如

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

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世

浏览器样式（css）兼容

1.默认的padding和margin值解决方法:css开头写*{margin:0;padding:0;} 2.placeholder IE8下不支持HTML5属性placeholder 3.last-child IE8不兼容last-child.可以给最后一个元素设置一个.last的class. 4.background-size:cover IE8不兼容 5.filter blur filter: blur(10px);高斯模糊,IE8不兼容

CSS过滤器

CSS过滤器(CSS filters)最初是为了向SVG矢量图提供不同的图片效果.现在,CSS filters 不在局限于在SVG中使用,也可以在图片.文字和其它元素上使用.CSS过滤器效果并不难理解.就像photoshop里每一个图层可以使用不同的过滤效果:正片叠加.滤色.叠加等等.CSS过滤器实现的功能与之类似,它能将图片渲染为一种特殊的效果.CSS过滤器对页面性能是有影响的,不可以滥用.如果你整个页面很多地方都使用了CSS过滤器来渲染,那么你的页面将会加载得十分慢. CSS过滤器的语法非

常用前端布局，CSS技巧介绍

常用前端布局,CSS技巧介绍对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. 在这个地方可以使用padding来实现,首先,元素的高度=height+padding*2+border*2;所以我们可以将widht设置为0, 然后用padding来实现盒子的高度(若元素padding的值是一个百分比,则是基于其父元素的宽度来计算的) width: 50%; height: 0;

CSS中filter属性的使用

filter 属性定义了元素的可视效果 blur 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊. 如果没有设定值,则默认是0:这个参数可设置css长度值,但不接受百分比值. body { background-color: #000; color: skyblue; } div { border: 1px solid #fff; padding: 10px; width: 610px; margin: 10px; }

用 CSS 实现酷炫的动画充电效果

巧用 CSS 实现酷炫的充电动画循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果. 画个电池当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了.有了电池,那接下来直接充电吧.最最简单的动画,那应该是用色彩把整个电池灌满即可. 方法很多,代码也很简单,直接看效果: 有内味了,如果要求不高,这个勉强也就能够交差了.通过蓝色渐变表示电量,通过色块的位移动画实现充电的动画.但是总感觉少了点什么. 增加阴影及颜色的变化如果要继续优化的话,需要添加点