html 实现模糊效果

最新推荐文章于 2024-05-22 09:30:33 发布

田小涛

最新推荐文章于 2024-05-22 09:30:33 发布

阅读量1.3w

点赞数 5

分类专栏： HTML 文章标签： html html5 滤镜效果 filter

本文链接：https://blog.csdn.net/Q718330882/article/details/40371535

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS中filter属性

filter:filtername(fparameter1, fparameter2...)

滤镜说明：

Alpha：设置透明层次

blur：创建高速度移动效果，即模糊效果

Chroma：制作专用颜色透明

DropShadow：创建对象的固定影子

FlipH：创建水平镜像图片

FlipV：创建垂直镜像图片

glow：加光辉在附近对象的边外

gray：把图片灰度化

invert：反色

light：创建光源在对象上

mask：创建透明掩膜在对象上

shadow：创建偏移固定影子

wave：波纹效果

Xray：使对象变得像被x光照射一样

1、滤镜：Alpha "filter:Alpha(Opacity=opacity) Opacity：起始值，取值为0～100, 0为透明，100为原图。

2、滤镜：blur ilter:Blur(Add = add, Direction = direction, Strength = strength) Add：一般为1，或0。Direction：角度，0～315度，步长为45度。Strength：效果增长的数值，一般5即可。

3、滤镜：Chroma filter:Chroma(Color = color)

4、滤镜：DropShadow filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive) Offx：X轴偏离值。Offy：Y轴偏离值。

5、滤镜：shadow filter:Shadow(Color=color, Direction=direction) Direction：角度，0－315度，步长为45度。

6.颜色变化 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');

.......

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>Html 模糊效果</title>
<style type="text/css">
.box{
	margin:0 auto;
}
.box img{
	width:200px;
	height:200px;
}
.f1{
	float:left;
}
.f2{
	float:left;
	padding-left:20px;
}
.grayscale{
	filter:alpha(grayscale=50);
}
.opacity{
	opacity:0.4;
	filter:alpha(opacity=40)i;
}
.opacity:hover{
	opacity:1.0;
	filter:alpha(opacity=100 );
}

</style>
</head>

<body>
<div class="box">
	<div class="f1"><img src="img/lzl.jpg" /><p>原图</p></div>
	<div class="f2"><img src="img/lzl.jpg" class="grayscale" /><p>grayscale</p></div>
	<div class="f2"><img src="img/lzl.jpg" class="opacity" /><p>opacity</p></div>
</div>
</body>	
</html>