Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单:
4 s5 C7 ^$ Y2 B4 p3 l! V' f0 f8 G* E8 A
& G3 f5 b3 m V: z Filter:Mask(Color=颜色)
$ o0 i1 e( T; d( U# i. w# ]
- ]. H2 u% K/ |1 a$ A 只有一个Color参数,用来指定使用什么颜色作为掩膜。
8 X( U7 @) g& V: E! h5 z 同样,我们来看一下一幅图片在加上mask属性前后的效果(见下图):
/ y8 z$ _$ Q% U9 l1 M6 d0 Q
6 H. D" A F+ _) K% T8 h
, p$ `3 e) {6 O ^4 Q% _/ o5 W/ J
- B9 |% Q( a$ D1 l0 @* `
2 {0 x n% p5 J2 o" W, b( F* N8 x
原 图
|$ e, X! @! D0 C, C n
1 k! |* W- ]5 ?" o b5 w* x3 P; }! v* j# j" y1 A. J |$ h6 S" V% D' ?
& O! u4 n+ H( g, ?# u2 @; G( o
! z- d5 h; b8 F
0 D" F. c' o3 v. r" n MMask属性效果图
3 G7 g9 a9 z4 m! O/ m7 P8 B( ?/ s ^+ e6 N( Z: E5 ]; c+ i
加上MASK属性的效果就好象是在用有色眼镜看物体一样。上面的效果的代码如下:
1 w9 I# |/ {/ y ^
3 A, {2 l" m7 k* t html
& `8 C, O3 z' E' W' J% ^ head
7 j+ ~, @ E1 ~. w title mask filter /title
$ a4 H, [7 U. h
style//*设置CSS样式开始*//
, a- R2 c8 v& U9 c4 F !--
" ~& P" o ^8 J4 ^ div{position:absolute;top:20;left:40;
3 [ j u& k' {% P; A+ r# n$ c filter:mask(color:#666699);}
& `6 W, t4 Y, b& l& R3 B2 I) f: p3 _
//*定义DIV区域的样式,绝对定位,mask属性的color参数值指定用什么颜色遮
/ o. |" Q5 z0 Z7 v1 r, K/ c 住对象*//
2 _1 y( n- O: x/ K5 Y% M: X
p{font-family:bailey;font-size:72pt;
8 N9 b& q, {) L8 b% L9 z3 P
font-weight:bold;color:#FF9900;}
! y3 y: e( p/ s; N& `6 Z //*定义P区域内的样式,字体名称、大小、粗细、前景色*//
4 U( k% l' ~6 v- c0 @4 y: ^& c --
/ i$ v* | g$ |5 \/ D /style
" u; k8 l1 j. ^( f* \5 i( M0 V1 j6 h( M /head
. p2 P! d% v$ a# t: p" f2 P, a' O body
! z' y' Q' `9 {1 h. a div
8 I" t4 m- X A% I- r p wenyleaf /p
; n- n/ A5 U1 B8 J /div
: \$ w* b- H3 J" L /body
! c! U. C. K, a S. A4 r /html
( a2 d' |) T4 _
, i" F, U7 L; F8 E) T' q
其实,您就算在代码中去掉对字体前景色的定义,得到的效果还是一样的。因为有了Mask属性的定义,它遮罩下的字体颜色的设置就已经失去了意义。
; o' U* u& H/ ?6 T4 ]
还有一点需要您注意的地方,mask属性对图片文件的支持还是不够,不能达到应该有的效果。