CSS滤镜的使用教程
1、首先我来设置一个区块DIV，并设置高度长度以及背景颜色，以及插入一张图片，在不设置任何滤镜下的样式来说明问题，具体代码如下：
<html>
<head>
<title>滤镜的使用</title>
<style>
div{
background-color:red;
width:200px;
height:200px;
}
img{widht:200px;}
</style>
</head>
<body>
<div></div>
<br/>
<img src="3.jpg" >
</body>
</html>
可以看到如下图的效果图，一个红色区块下面有个风景图片。
2、Alpha滤镜的使用：首先来设置图片的亮度，用到了Alpha下的opacity这个属性值来设置，具体值在0到100，具体代码如下：
<html>
<head>
<title>滤镜的使用</title>
<style>
div{
background-color:red;
width:200px;
height:200px;
}
img
{
width:200px;
filter:alpha(opacity=0.2);
}
</style>
</head>
<body>
<div></div>
<br/>
<img src="3.jpg" >
</body>
</html>
执行的效果图如下图所示。
3、Alpha滤镜的样式的使用：用style=1来设置从左到右的淡化，具体代码如下：
<html>
<head>
<title>滤镜的使用</title>
<style>
div{
background-color:red;
width:200px;
height:200px;
}
img
{
width:200px;
filter:alpha(style=1);
}
</style>
</head>
<body>
<div></div>
<br/>
<img src="3.jpg" >
</body>
</html>
具体的执行效果如下：
4、Alpha滤镜的样式的使用：用style=2来设置从椭圆形的淡化，具体代码如下：
<html>
<head>
<title>滤镜的使用</title>
<style>
div{
background-color:red;
width:200px;
height:200px;
}
img
{
width:200px;
filter:alpha(style=2);
}
</style>
</head>
<body>
<div></div>
<br/>
<img src="3.jpg" >
</body>
</html>
可以看到如下图所示，从椭圆形的淡化效果了。
5、Alpha滤镜的样式的使用：用style=3来设置从中间向两边的淡化，具体代码如下：
<html>
<head>
<title>滤镜的使用</title>
<style>
div{
background-color:red;
width:200px;
height:200px;
}
img
{
width:200px;
filter:alpha(style=1);
}
</style>
</head>
<body>
<div></div>
<br/>
<img src="3.jpg" >
</body>
</html>
具体效果如下图所示，可以看到图片淡化了。
