CSS滤镜之Invert属性

css|滤镜

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

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

　　　　　　　　原图　　　　　　　　　　　　　　　 Invert属性效果图

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

时间： 2024-10-28 09:29:22

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

CSS 滤镜——Gray,Invert,Xray滤镜

css|滤镜使用Gray滤镜可以把一张图片变成灰度图,语法很简单: Gray 滤镜语法 {filter:gray} 实例: 正常图片滤镜代码实现效果拷屏 <img src="http://edu.cnzz.cn/NewsInfo/pic1.jpg" style="filter:gray" width="180" height="120"> --------------------------------

实例详解CSS滤镜(5)DropShadow属性

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

实例详解CSS滤镜(4)Chroma属性

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

实例详解CSS滤镜(3)Blur属性

css|滤镜|详解假如您用手在一幅还没干透的油画上迅速划过,画面就会变得模糊.CSS下的blur属性就会达到这种模糊的效果. 先来看一下blur属性的表达式: filter:blur(add=add,direction,strength=strength) 我们看到blur属性有三个参数:add.direction.strength. Add参数有两个参数值:true和false.意思是指定图片是否被改变成模糊效果. Direction参数用来设置模糊的方向.模糊效果是按照顺时针方向进行的.其

实例详解CSS滤镜(2)Mask属性

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

CSS滤镜之Shadow属性

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

CSS滤镜之Chroma属性

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

CSS滤镜之Wave属性

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

CSS滤镜之Xray属性

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