CSS滤镜:Invert属性

css|滤镜

Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。
　　它的表达式也很简单：
　　Filter：Invert

　　我们再来看一下加上Invert属性前后的图片效果变化（如下图）：

　　　　　　　　原图　　　　　　　　　　　　　　　 Invert属性效果图

　　我们看到Invert属性实际上达到的是一种“底片”的效果。

时间： 2024-10-30 17:01:32

CSS滤镜:Invert属性的相关文章

CSS滤镜:Gray属性

css|滤镜 Gray属性把一张图片变成灰度图.它的表达式很简单: Filter:Gray 其实这个属性没什么好讲的,只需在您定义的IMG样式中加入一句代码: {Filter:Gray}就一切OK了. 下面两幅图分别代表未加Gray属性和添加了Gray属性的效果: 这是原图,点击可放大转成gray属性后的效果图本节讲述的内容比较简单,下一节将向您介绍Invert转化属性.

css|滤镜 Mask属性为对象建立一个覆盖于表面的膜.它的表达式也很简单: Filter:Mask(Color=颜色) 只有一个Color参数,用来指定使用什么颜色作为掩膜. 同样,我们来看一下一幅图片在加上mask属性前后的效果(见下图): 原图 Mask属性效果图加上MASK属性的效果就好象是在用有色眼镜看物体一样.上面的效果的代码如下: <html> <head> <title> mask filter </title> <style>

CSS滤镜:Shadow属性

ado|css|滤镜 Shadow属性可以在指定的方向建立物体的投影.它的表达式是这样的: Filter:Shadow(Color=color,Direction=direction) 在这里,Shadow有两个参数值:Color参数用来指定投影的颜色:Direction参数用来指定投影的方向. 这里说的方向与我们在第二节Blur属性中提到的"方向与角度的关系"是一样的. 也许您会问,前面讲到的Dropshadow属性和Shadow属性有什么不同吗? 光说的话,您恐怕还难以理解,让我们

CSS滤镜:Wave属性

css|滤镜 Wave属性用来把对象按照垂直的波纹样式打乱.它的表达式如下: Filter:Wave(Add=True(False),Freq=频率,LightStrength=增强光效, Phase=偏移量,Strength=强度) 我们看到Wave属性的表达式还是比较复杂的,它一共有五个参数.Add参数有两个参数值:True代表把对象按照波纹样式打乱:False代表不打乱: Freq参数指生成波纹的频率,也就是指定在对象上共需要产生多少个完整的波纹. LightStrength参数是为了使生

CSS滤镜:Chroma属性

css|滤镜 Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下: Filter:Chroma(color=color) 这个属性的表达式是不是很简单,它只有一个参数.只需把您想要指定透明的颜色用Color参数设置出来就可以了.比如下面这幅图: 图中显示两种字体,两种颜色,我们现在对"leaves"字体添加chroma属性,使其透明.代码如下: <html> <head> <title>chroma filter</title

CSS滤镜:DropShadow属性

ado|css|滤镜 DropShadow属性是为了添加对象的阴影效果的.它实现的效果看上去就像使原来的对象离开页面,然后在页面上显示出该对象的投影.看一看它的表达式: Filter:DropShadow(Color=color,Offx=Offx,Offy=offy, Positive=positive) 该属性一共有四个参数: Color代表投射阴影的颜色. Offx和offy分别X方向和Y方向阴影的偏移量.偏移量必须用整数值来设置.如果设置为正整数,代表X轴的右方向和Y轴的向下方向.设置为

CSS滤镜:Glow属性

css|滤镜当对一个对象使用"Glow"属性后,这个对象的边缘就会产生类似发光的效果.它的表达式如下: Filter:Glow(Color=color,Strength=strength) Glow属性的参数只有两个:Color是指定发光的颜色,Strength指定发光的强度,参数值从1到255. 让我们先来看一下加上Glow属性的效果图: 怎么样,是不是有一种燃烧的火焰的感觉.实现这种效果的代码如下: <html> <head> <title>f

CSS滤镜:Xray属性

css|滤镜 Xray就是X射线的意思. Xray属性,顾名思义,这种属性产生的效果就是使对象看上去有一种X光片的感觉. 它的表达式很简单: Filter:Xray 我们还是先来看一个页面(如下图): 如果在上面的页面中加入Xray属性,也就是在<head>的<Style>中,增添下面这一句代码: Filter:Xray 您再看这个页面就会是另一种效果了:(如下图) 看,是不是就像给它拍了一张X光片一样.

CSS滤镜:alpha属性

css|滤镜 alpha是来设置透明度的.先来看一下它的表达格式: filter:alpha(opacity=opcity,finishopacity=finishopacity, style=style,startX=startX,startY=startY,finishX=finishX, finishY=finishY) 哇,怎么这么长.是啊,不过这些参数都各有其用. Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明. Style参数指定了透明区域的形