发新话题
打印

CSS滤镜之Chroma属性

CSS滤镜之Chroma属性


Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下:
! p4 o1 q" w7 ~9 C: E3 h8 x8 Y
8 H! }$ H/ Y" R* F  Filter:Chroma(color=color)   
- o( ^% s9 W2 S! [* m- Q- e
7 }1 _" L! A, q) I" k/ B  这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图:  ; \( W8 c, d* L) o: n9 a
! `) |8 L! f( g8 X6 [* l6 X' [
0 f: ^7 d3 H1 d7 i. v2 ~( G
+ D2 d, J; b2 I4 Q3 W% G1 u
  
2 A3 T* K$ z* E9 N0 u0 W& @  p9 ?
, q  Y, k) u2 r" G  Y% y/ o  图中显示两种字体,两种颜色,我们现在对“leaves”字体添加chroma属性,使其透明。代码如下:  7 S6 r- q, O/ R) V; d- j( ~
0 m$ G& X0 t8 V
  html
+ x& a5 W' _+ N: u+ _  a   head
( l) V, w/ v8 v& B+ @   titlechroma filter/title
* m9 M" _# @! K- ~' j   style - W# A. k0 q; i$ d
   !-- ! {" p5 J" m3 O. ]* `5 i
    div{position:absolute;top:70;width:200;
: x; o* S* M" W/ k, D8 c      filter:chroma(color=green)}
) z' n4 Y) {( `7 I5 `2 Y   //*定义DIV范围内绿色为透明色,另外设置DIV的位置*//
/ K: Y5 f0 Q5 ~5 j! V# z+ c   p{font-family:bailey;font-size:48;font-weight:bold;
# W- D6 C1 ^- M+ B- ^   color:green} //*设置P的字体名称、大小、粗细、颜色*// 6 C$ ~9 g' I1 z$ f  ~, i. ~
   em{font-family:lucida handwriting italic;font-size:48;
: J' ~% J' U" x2 h* O0 @7 ]6 c" k   font-weight:bold;color:rgb(255,51,153)}
. i, q" S8 s2 a' J   //*设置EM的字体名称、大小、粗细、颜色*// & `- L# p( {7 M. w5 _
   --
# @* K) @- V; D   /style 9 J1 B# c$ Z9 z( }( E4 ~
   /head ' X) w  c' e0 Y; T5 F
   body * ]" v+ Q, Y. C& @  k
   div
. [% V( ]3 A% Q( g6 ?5 r! v/ o- Z   pLEAVES emLOVE/em/p 3 H* G" A7 `6 x6 q) d6 e4 _
   /div
+ n2 L$ M8 d' Q; S2 }   /body
5 b& j" L; z: ^2 B  /html  
0 h6 h( A  l( p& y3 I; M! v) |4 B
  p3 z9 m; n/ f4 p  通过上面代码中对chroma的属性设置,使绿色透明。显示效果如下图:  % z3 l8 E' ^, B: U# G1 F0 T5 F

' [" Q9 A- q+ G6 x: d( Y$ j# }* S, I

5 x& h; o  O: Z3 o/ i! w6 O  3 J: `* x$ K1 t, R, E5 C

" m+ m0 q. L' d* l1 u  P  我们看到绿色的leaves字体不见了,实际上它是透明了,在IE下点击它所在的区域,它还是会显示出来(见下图):  
9 F/ K, s" _2 c$ ?! \9 V) n, F
6 b: a3 x; O3 n/ i, W; ^" ~4 X) c* M+ p0 P+ }
! E1 k/ T5 C" T, p9 y
  ( Y4 x  J; g3 Z* U9 E- [4 r' H/ j
9 V8 o. A, X6 L2 d6 @* l+ Z3 H
  另外,需要注意的是,chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理(比如JPG、GIF等格式),所以它们很少有固定的位置可以设置为透明。



点击图标进入精品网摘收藏 欢迎大家加入网络收藏夹

TOP

发新话题