精通CSS.DIV网页样式与布局(八)——滤镜的使用
我们这次来说说滤镜的使用,我们首先看看滤镜的概述:
CSS滤镜并不是浏览器的插件,也不符合CSS标准,二而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的又累功能的集合。由于浏览器IE有着很广的使用范围,因此CSS滤镜也被广大设计者所喜爱。
CSS滤镜的标识符是“filter”,总体上跟其他CSS语句一样,都十分简单:
filter:filtername(parameters);
我们接下来看看alpha通道:我们先看看效果:
第二幅图片有点像夜晚的效果:我们看CSS代码:
我们看一下CSS代码:
我们很清楚的看到,老虎身上的金黄色进行了过滤。我们看一下代码:
这里其实是四幅图片,第一幅(左上角),原片;第二幅进行了水平的映像,第三幅进行了竖直方向的镜像;而右下角同时进行了水平和竖直方向的映像。我们看一下代码:
我们看到第二幅图,有点像影子变幻的效果,我们看一下CSS代码:
我们看一下这个代码:
代码:
<html><head><title>三个滤镜同时使用</title><style><!--body{margin:12px;background:#000000;}.three{filter:flipv alpha(opacity=80) wave(add=0, freq=15, lightstrength=30, phase=0, strength=4);/* 同时使用三个滤镜 *//* 竖直翻转、透明、波浪效果 */}--></style> </head><body><img src="lotus.jpg"><br><img src="lotus.jpg" class="three"></body></html>当然大家要是想做的更好一些,还是推荐photoshop,只是CSS也能很简单的实现这些功能,但是貌似在我的IE里边能显示这个效果,在别的浏览器显示不出来,所以大家想完美一些,那么就建议用photoshop。