多语言展示
当前在线:1172今日阅读:84今日分享:32

CSS滤镜的使用教程

滤镜或者滤镜集合作用在块级对象,还需要设置区块的长度高度以及背景颜色才能显示效果。这里采用一个div区块和一张图片来说明实例,具体设计如下,希望能帮到各位
工具/原料
1

CSS基础知识

2

HTML基础知识

方法/步骤
1

首先我来设置一个区块DIV,并设置高度长度以及背景颜色,以及插入一张图片,在不设置任何滤镜下的样式来说明问题,具体代码如下: 滤镜的使用


  可以看到如下图的效果图,一个红色区块下面有个风景图片。

2

Alpha滤镜的使用:首先来设置图片的亮度,用到了Alpha下的opacity这个属性值来设置,具体值在0到100,具体代码如下: 滤镜的使用


  执行的效果图如下图所示。

3

Alpha滤镜的样式的使用:用style=1来设置从左到右的淡化,具体代码如下: 滤镜的使用


  具体的执行效果如下:

4

Alpha滤镜的样式的使用:用style=2来设置从椭圆形的淡化,具体代码如下:滤镜的使用


  可以看到如下图所示,从椭圆形的淡化效果了。

5

Alpha滤镜的样式的使用:用style=3来设置从中间向两边的淡化,具体代码如下:滤镜的使用


  具体效果如下图所示,可以看到图片淡化了。

注意事项
1

设置滤镜需要调试不同浏览器来设置

2

CSS提供了很多美化的功能

推荐信息