【CSS+DIV】（1）——滤镜的应用

最新推荐文章于 2023-10-12 16:39:20 发布

VIP文章 Reka

最新推荐文章于 2023-10-12 16:39:20 发布

阅读量1.9k

点赞数 3

分类专栏：我的成长路の计算机 ----------【Web前端】文章标签： css javascript

本文链接：https://blog.csdn.net/helijie92902/article/details/50382080

版权

背景：牛腩中接触过CSS，当时对这个CSS情有独钟，因为它可以美化界面，而我就喜欢和界面这种看得见效果的东西打交道，现在又重新学习，而且内容还那么多，超级开心，废话少说，动手吧！

一、CSS滤镜

CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器（其他浏览器不支持此功能）中的一类功能的集合。

CSS滤镜的标识符是“filter”，总体上跟其他CSS语句一样，都十分简单，语法如下：filter:filtername(parameters);

也就是说，进行滤镜操作必须先定义filter，filtername是滤镜属性名，包括alpha、blur和chroma等多种属性；parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。

二、基本滤镜

通常指可以直接作用在对象上，便能立即生效的滤镜。

1、Alpha通道

代码：

<html>
<head>
<title>alpha滤镜</title>
<style>

body{
	background:url(bg1.jpg);  /*星空背景 */
	margin:20px;
}
img{
	border:1px solid #d58000;
} 
.alpha1{                         
	filter:alpha(opacity=50);    /*设置透明度50%*/
}
.alpha2{
	filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=0,finishy=100);
	/* 从上到下渐变 */
}
.alpha3{
	filter:alpha(opacity=100,finishopacity=0,style=2);
	/* 圆形渐变，中间不透明，四周透明 */
}
.alpha4{
	filter:alpha(opacity=0,finishopacity=80,style=2);
}
.alpha5{
	filter:alpha(opacity=100,finishopacity=0,style=3);
	/* 矩形渐变，中间不透明，四周透明 */
}
.alpha6{
	filter:alpha(opacity=0,finishopacity=100,style=3);
	/* 反之 */
}

</style>
</head>
<body>
<img src="村庄.jpg" border="0"> 
<img src="村庄.jpg" border="0" class="alpha1"> 
<img src="村庄.jpg" border="0" class="alpha2"> 
<img src="村庄.jpg" border="0" class="alpha3"> <br>
<img src="村庄.jpg" border="0" class="alpha4"> 
<img src="村庄.jpg" border="0" class="alpha5"> 
<img src="村庄.jpg" border="0" class="alpha6">
</body>
</html>

效果：

2、模糊（Blur）& 运动模糊（Motion Blur）

代码：

<html>
<head>
<title>Blur & Motion Blur</title>
<style>

body{
	margin:10px;
}
.blur{
	filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false); 
}
.motionblur{
	filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=

最低0.47元/天解锁文章

Reka

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
71
评论
【CSS+DIV】（1）——滤镜的应用

背景：牛腩中接触过CSS，当时对这个CSS情有独钟，因为它可以美化界面，而我就喜欢和界面这种看得见效果的东西打交道，现在又重新学习，而且内容还那么多，超级开心，废话少说，动手吧！一、CSS滤镜 CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。 CSS滤镜的标识符是“filter”
复制链接

扫一扫