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

转载 2008年05月01日 00:23:00
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
0 id=zoom> Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单:

  Filter:Mask(Color=颜色)

  只有一个Color参数,用来指定使用什么颜色作为掩膜。
  同样,我们来看一下一幅图片在加上Mask属性前后的效果(见下图):

   加上Mask属性的效果就好象是在用有色眼镜看物体一样。上面的效果的代码如下:

  <html>
    <head>
    <title> Mask filter </title>
    <style>
//*设置CSS样式开始*//
    <!--
    div{position:absolute;top:20;left:40;
    filter:Mask(color:#666699);}

    //*定义DIV区域的样式,绝对定位,Mask属性的color参数值指定用什么颜色遮
    住对象*//

    p{font-family:bailey;font-size:72pt;
     font-weight:bold;color:#FF9900;}

    //*定义P区域内的样式,字体名称、大小、粗细、前景色*//
    -->
    </style>
    </head>
    <body>
    <div>
    <p> wenyleaf </p>
    </div>
    </body>
  </html>

  其实,您就算在代码中去掉对字体前景色的定义,得到的效果还是一样的。因为有了Mask属性的定义,它遮罩下的字体颜色的设置就已经失去了意义。
  还有一点需要您注意的地方,Mask属性对图片文件的支持还是不够,不能达到应该有的效果。

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

设计模式之工厂方法模式详解与应用(2)

-
  • 1970年01月01日 08:00

巧用CSS的 Mask 滤镜

作者:冯永曜在网页制作中使用CSS,这已是众所周知,而关于CSS滤镜使用的却介绍得不多。其实,0CSS的滤镜在Dreamweaver3中用起来也很方便,且能使文字产生一种类似图象的效果,但比起图片来可...
  • 21aspnet
  • 21aspnet
  • 2004-11-04 09:49:00
  • 2074

css3-filter滤镜总纲

filter属性允许您向文本和图像添加更多的样式效果,可替代部分ps的效果。 注释:1.若需要使用 filter 属性,请始终指定元素的宽度。            2.除非 background...
  • mafan121
  • mafan121
  • 2016-11-25 11:01:40
  • 436

CSS滤镜属性

CSS滤镜属性用于定制图片的显示效果1)滤镜的有效HTML标记:BODY  BUTTON   DIV     IMG   INPUT   MARQUEE    SPAN    TABLE    TD ...
  • black_ben
  • black_ben
  • 2006-02-14 11:56:00
  • 1001

PS完美支持64位抠图滤镜DFT EZ Mask v2.002中文使用说明

  • 2013年06月08日 14:38
  • 9.49MB
  • 下载

PS抠图滤镜Mask Pro 4.11 汉化中文版-一款顶级的PS扣像插件

  • 2015年06月18日 11:35
  • 1.58MB
  • 下载

CSS滤镜属性详解

  • zgqtxwd
  • zgqtxwd
  • 2008-04-30 17:23:00
  • 162

css滤镜属性及一般用法

以前整理的一篇文章,虽然说标准不支持滤镜,但感觉有时候还是会用到它的,今天又把它给提出来了,方便有需要的时候可以查询一下Alpha:设置透明度;{filter:alpha( opacity=opaci...
  • yuanshilao
  • yuanshilao
  • 2006-03-30 22:30:00
  • 1847

css filter 属性

CSS静态滤镜样式 (filter)(只有IE4.0以上支持)   CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, ....
  • linjiaxingqqqq
  • linjiaxingqqqq
  • 2011-08-23 20:46:15
  • 1265

css中的filter属性语法说明

刚开始学css,开始遇到filter不懂什么意思后来到网上查了,觉得解释的很全面,就把它抠下来,以便自己经常来看看。 CSS滤镜的使用方法:filter:filtername(parameters) ...
  • wucaijuan
  • wucaijuan
  • 2009-12-21 11:22:00
  • 3272
收藏助手
不良信息举报
您举报文章:实例详解CSS滤镜(2)Mask属性
举报原因:
原因补充:

(最多只允许输入30个字)