IT博客-web design-文章分类-csshttp://www.cnitblog.com/saga/category/5555.htmlweb css爱好者家园 zh-cnFri, 07 Oct 2011 02:46:18 GMTFri, 07 Oct 2011 02:46:18 GMT60遮罩效果：maskhttp://www.cnitblog.com/saga/articles/28294.htmlhappyheipihappyheipiSun, 10 Jun 2007 14:02:00 GMThttp://www.cnitblog.com/saga/articles/28294.htmlhttp://www.cnitblog.com/saga/comments/28294.htmlhttp://www.cnitblog.com/saga/articles/28294.html#Feedback0http://www.cnitblog.com/saga/comments/commentRss/28294.htmlhttp://www.cnitblog.com/saga/services/trackbacks/28294.html【功能说明】

使用mask滤镜可以将某个对象遮盖在另一元素上，用该对象的形状遮蔽住这个元素，而没有被遮挡住的地方则以设定的颜色来显示。该滤镜常用做对图像的处理。

【基本语法】

filter:mask(color=遮罩的颜色)

这里，只需要定义遮罩的颜色，可以是颜色的英文名称，也可以是十六进制的颜色值。另外，由于要确定元素未被遮挡的区域，因此要设置被遮盖元素的范围。

提示：如果要准确显示遮罩的形状，该对象要有明确的透明区域。如果要对图像进行遮罩处理，一般要求图像为gif格式，因为这种格式能保留图像的透明区域属性。如果使用的是BMP图像，则该图像被认为是一个整体，因此不能正确显示遮罩的效果。

【实例演示】

下面通过代码18-12演示遮罩效果的设置。

代码18-12  创建遮罩效果

<HTML>

  <HEAD>

    <TITLE>遮罩滤镜的应用效果</TITLE>

    <style type="text/css">

    <!--

      H2{font-family:"方正姚体"}

      .exam{filter:mask(color=#AA00FF)}

    -->

    </style>

  </HEAD>

  <BODY>

    <CENTER>

      <H2>应用遮罩滤镜的效果</H2>

      <img src="mask.gif" width=260 HSPACE=20>

      <img src="mask.gif" width=260 HSPACE=20 class=exam>

    </CENTER>

  </BODY>

</HTML>

运行上述代码的效果如图18-21所示。

图18-21  遮罩效果

为了更好地说明遮罩滤镜只对带有透明因素的图像有效，这里将代码中的图像更改为mask.jpg，该图像虽然外观与mask.gif相同，但图像格式不同。修改程序后保存，运行效果如图18-22所示。

图18-22  对JPG图像应用遮罩的效果

从图18-22可以看出，原来应该出现遮罩效果的地方变成了空白，这并不是该图像消失了，而是因为它作为一个整体当成了遮罩，完全被遮盖住了。如果对页面进行全选操作，可以看到该位置上还是有图像的，如图18-23所示。



happyheipi 2007-06-10 22:02 发表评论
]]>