妙用CSS滤镜为图片加上特殊效果

妙用CSS滤镜为图片加上特殊效果

有时候,我们需要给网页中的图片加一些特殊的效果,比如透明、扭曲、阴影或者翻转等,我们一般都会想到用Photoshop等一些图形软件来处理,其实我们也可以利用CSS(层叠式样表)提供的一些滤镜来处理,这对于不熟悉Photoshop的网友来说,是非常好的一件事。

 

     我们先从较简单的开始,介绍几个没有参数的滤镜。

     1.Gray滤镜

    Gray滤镜的作用是产生黑白效果

    使用方法:<img src=”a.gif” style=”filter:gray”>

    效果如图所示

 

     2.Invert滤镜

    Invert滤镜的作用是反色效果

    使用方法:<img src=”a.gif” style=”filter:invert”>

    效果如图所示

 

     3.Xray滤镜

    Xray滤镜的作用是产生X光效果

    使用方法:<img src=”a.gif” style=”filter:xray”>

    效果如图所示

 

     4.fliph和flipv

    fliph滤镜的作用是产生水平翻转效果;flipv滤镜的作用是产生垂直翻转效果

    使用方法:<img src=”a.gif” style=”filter:fliph”>或<img src=”a.gif” style=”filter:flipv”>

    效果如图所示

 

     

     接下来,我们再介绍几个比较复杂的滤镜:

 

     5.alpha滤镜

    alpha滤镜作用主要是对图片的透明度进行处理

    使用方法:<img src=”a.gif” style=”filter:alpha(opacity=value1,finishopacity=value2,style=value3)”>

    说明:value1为图片的透明值,范围是0(完全透明)~100(完全不透明)

     value2为图片透明度变换结束时的透明值,范围是0(完全透明)~100(完全不透明) 注:该值只有在value3设定时才有效

第 1 2 3 页

妙用CSS滤镜为图片加上特殊效果

相关文章:

你感兴趣的文章:

标签云: