背景:牛腩中接触过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=