发新话题
打印

CSS滤镜之Mask属性

CSS滤镜之Mask属性


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属性对图片文件的支持还是不够,不能达到应该有的效果。



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

TOP

发新话题