校园第一站首页   校园   教育   考试   电脑   英语   读书   就业   论文   奥运   健康   QQ   游戏   下载 >>>最新偶像剧、台剧、韩剧、日剧在线收看!
XYDYZ-BBS  BLOG  WISH  ASK
本站
Google
网页
校园第一站
主页>电脑>网页设计>DIV+CSS> CSS滤镜-Mask属性
  • 源于校园 服务于校园 进入校园第一站社区
  • CSS滤镜-Mask属性
    http://www.xydyz.com 来源:洪恩在线 2008-03-14 阅读: 评论

    10、Mask属性

      Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单:

      Filter:Mask(Color=颜色)

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

    原图

    原 图

    mask属性效果图

    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属性对图片文件的支持还是不够,不能达到应该有的效果。
      本节讲解了Mask属性的应用,下一节将向您介绍Shadow(阴影)属性。

    上一篇:CSS滤镜-alphInvert属性  
    下一篇:CSS滤镜-Shadow属性

    ·网友互动--用户名: (新注册) 密码: 匿名评论 [所有评论]
    评论内容:(用户发表意见仅代表其个人意见,评论内容与校园第一站立场无关,请自觉遵守互联网相关政策法规)
    关注此文读者还看过
    • ·CSS滤镜-alphInvert属性
      ·CSS滤镜-Shadow属性
      ·CSS滤镜-Gray属性
      ·CSS滤镜-Wave属性
      ·CSS滤镜-Glow属性
      ·CSS滤镜-Xray属性
    最新更新
    • ·CSS网页样式设计攻略全集
      ·Div+CSS布局入门教程
      ·DIV CSS制作网页时易犯的错误总结
    文章关注度排行
    ·CSS+DIV网页样式与布局视频教程全集
    ·如何使用CSS来进行网页排版
    ·CSS滤镜-Xray属性
    ·Div+CSS布局入门教程
    ·CSS教程:li和ul标签
    ·DIV CSS制作网页时易犯的错误总结
    ·CSS滤镜-Shadow属性
    ·CSS网页样式设计攻略全集
    ·CSS滤镜-Gray属性
    ·CSS滤镜-Chroma属性
    热点推荐
    如何使用CSS来进行网页排版
    如何使用CSS来进行网页
    CSS滤镜-Xray属性
    CSS滤镜-Xray属性
    Div+CSS布局入门教程
    Div+CSS布局入门教程
    CSS滤镜-Shadow属性
    CSS滤镜-Shadow属性
    CSS滤镜-Gray属性
    CSS滤镜-Gray属性
    CSS滤镜-Chroma属性
    CSS滤镜-Chroma属性
    最新文章
    ·如何使用CSS来进行网页排版
    ·CSS网页样式设计攻略全集
    ·Div+CSS布局入门教程
    ·DIV+CSS树型菜单
    ·css样式做细线表格
    ·CSS滤镜-Xray属性
    ·CSS滤镜-Wave属性
    ·CSS滤镜-Shadow属性
    ·CSS滤镜-alphInvert属性
    ·CSS滤镜-Gray属性
    频道推荐
    • ·Div+CSS布局入门教程
    • ·DIV CSS制作网页时易犯的错误总结
    • ·CSS网页样式设计攻略全集
    网站精华
    CSS滤镜-Xray属性
    CSS滤镜-Xray
    CSS快速入门
    CSS快速入门
    CSS属性
    CSS属性
    • ·CSS网页样式设计攻略全集
    • ·Div+CSS布局入门教程
    • ·DIV CSS制作网页时易犯的错误
    Google ·高级搜索
    | 网站地图 | 关于我们 | 联系我们 | 广告服务 | 友情链接 | 版权声明 |
    版权所有:校园第一站 @2007-2008 未经授权禁止复制或建立镜像
    Site powered by hyperblue http://www.xydyz.com online services. all rights reserved. 鄂ICP备07009403号