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等格式),所以它们很少有固定的位置可以设置为透明。