CSS滤镜的使用教程

2024-10-13 20:08:33

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>可以看到如下图的效果图，一个红色区块下面有个风景图片。

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>具体的执行效果如下：

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>具体效果如下图所示，可以看到图片淡化了。