首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

精通CSS.DIV网页式样与布局(八)——滤镜的使用

2012-10-17 
精通CSS.DIV网页样式与布局(八)——滤镜的使用我们这次来说说滤镜的使用,我们首先看看滤镜的概述:CSS滤镜并

精通CSS.DIV网页样式与布局(八)——滤镜的使用

我们这次来说说滤镜的使用,我们首先看看滤镜的概述:

CSS滤镜并不是浏览器的插件,也不符合CSS标准,二而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的又累功能的集合。由于浏览器IE有着很广的使用范围,因此CSS滤镜也被广大设计者所喜爱。

CSS滤镜的标识符是“filter”,总体上跟其他CSS语句一样,都十分简单:

filter:filtername(parameters);

我们接下来看看alpha通道:我们先看看效果:

精通CSS.DIV网页式样与布局(八)——滤镜的使用

第二幅图片有点像夜晚的效果:我们看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。

2楼csh6243661883天前 21:35
很好的系列的博客,学习啦,希望能提供一些demo。谢谢啦。。呵呵
Re: yi_zz3天前 08:05
回复csh624366188n结合起来就是一个demo,呵呵
1楼the_fire4天前 13:29
坚持写吧,希望你能从入门写到精通,记得深入的话要研究浏览器如何渲染这些css,以及那些盒子模型。nn另外可以参考下bootstrap这个web端的框架,css代码的组织结构。
Re: yi_zz4天前 15:28
回复the_firen好~

热点排行