网页中图片如何应用CSS的滤镜的效果

来源:爱站网时间:2021-02-19编辑:网友分享
网页中图片如何应用CSS的滤镜的效果?对于这个问题是不是很多用户们都不是很了解呢?那么接下来我们就一起去看看吧。

网页中图片如何应用CSS的滤镜的效果?对于这个问题是不是很多用户们都不是很了解呢?那么接下来我们就一起去看看吧。

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

  1.Gray滤镜

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

  使用方法:

 

以下是引用片段:
 

  2.Invert滤镜

  Invert滤镜的作用是反色效果

  使用方法:

 

以下是引用片段:
 

  3.Xray滤镜

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

  使用方法:

 

以下是引用片段:
 

  4.fliph和flipv

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

  使用方法:

 

以下是引用片段:

  5.alpha滤镜

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

  使用方法:

 

以下是引用片段:
 

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

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

  value3为图片透明度变换方向。取值为1时,图片透明度按从左到右线性变化;取值为2时,图片透明度从内到外沿半径变化;取值为3时,图片透明度从内到外呈矩形变化

  例:

 

以下是引用片段:
 

  6.shadow滤镜

  shadow滤镜的作用是产生阴影效果

  使用方法:

 

以下是引用片段:
 

  说明:value1为阴影的颜色值,如000000表示黑色

  value2为光线照射角度,如135

  例:

 

以下是引用片段:
 

  7.wave滤镜

  wave滤镜的作用是使图片产生扭曲效果

  使用方法:

 

以下是引用片段:
 

  说明:value1的取值为1时,将原图片增加到处理过的图片上;为0时,则不增加

  value2为视觉扭曲的波浪数

  value3是波形亮度百分比,取值范围为0~100

  value4为正弦波开始偏移的初始量,取值范围为0~100

  value5为波形效果的强度

  例:

 

以下是引用片段:
 

  下面我们举一个简单的例子,浏览时会出现这样的一个效果:网页上有一个几乎透明的图像,当鼠标移到图像上时,图像慢慢变清晰;当鼠标移开时,图像又恢复到原来的透明状态。

  要实现这个功能,需要使用到CSS的alpha滤镜,并用javascript来控制alpha滤镜的Opacity值,首现在网页中插入一个图片,并设定alpha滤镜的opacity值,让图片透明,图片代码为:

 

以下是引用片段:

      javascript代码如下:

 

以下是引用片段:

      将上面的代码加入中,然后给图片加入onMouseOveronMouseOut动作,即

 

以下是引用片段:

 

以上内容就是小编为大家分享网页中图片如何应用CSS的滤镜的效果的内容,每一种方法都有各自的优势和不同的使用场景,使用不同的方法组合,可以节省不少时间,提高工作效率。

上一篇:完美解决DIV+CSS浮动布局的方案

您可能感兴趣的文章

相关阅读