转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
Invert属性、Glow属性和FlipH、FlipV属性         ★★★★

Invert属性、Glow属性和FlipH、FlipV属性

作者:闵涛 文章来源:闵涛的学习笔记 点击数:732 更新时间:2009/4/23 13:46:58

     Invert属性


  Invert属性可以把对象的可视化属性全部翻转,包括色彩、饱和度和亮度值。
  它的表达式也很简单:


  Filter:Invert


  我们再来看一下加上Invert属性前后的图片效果变化(如下图):


原图     Invert属性效果图


  我们看到Invert属性实际上达到的是一种“底片”的效果。
  自己拿别的图来试试吧。

    Glow属性


  当对一个对象使用“Glow”属性后,这个对象的边缘就会产生类似发光的效果。它的表达式如下:
  Filter:Glow(Color=color,Strength=strength)
  Glow属性的参数只有两个:Color是指定发光的颜色,Strength指定发光的强度,参数值从1到255。 让我们先来看一下加上Glow属性的效果图:



  怎么样,是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下:
      <html>
    <head>
    <title>filter glow</title>
    <style>//*开始设置CSS样式*//
    <!--
    .leaf{position:absolute; top:20; width:400;
       filter:glow(color=#FF3399,strength=15);}
    file://*设置类leaf,绝对定位,Glow滤镜属性,发光颜色值为#FF3399,强度为
    15*//
    .weny{position:absolute; top:70; left:50; width:300;
       filter:glow(color=#9966CC,strength=10);}
    file://*设置类weny,绝对定位,glow滤镜属性,发光颜色值为#9966CC,强度为
    15*//
    -->
    </style>
    </head>
    <body>
    <div class=“leaf”>//*leaf类样式*//
    <p style=“font-family:lucida handwriting;
         font-size:54pt;font-weight:bold;color:#003366;”>
    Leaf Mylove</p>//*设置字体名称、大小、粗细、颜色*//
    </div>
    <div class=“weny”>//*weny类样式*//
    <p style=“font-family:bailey; font-size:48pt;
         font-weight:bold;color:#99CC66;”>
    file://设置字体名称、大小、粗细、颜色*//
    Weny Good!</p>
    </div>
    </body>
  </html>


  您还可以随意修改颜色值,看看其他的发光效果是怎样的。

   FlipH、FlipV属性
  Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转。它们的表达式很简单,分别是:
  Filter:FlipH
  Filter:FlipV
  我们先来看一幅图:



  下面我们分别对它实现水平翻转和垂直翻转,并且在图片上方的一段文字,也发生翻转。代码如下:
  <html>
   <head>
   <title>flip css</title>
   <style>//*设置CSS样式开始*//
   <!--
   div{position:absolute;top:20;width:300;
     filter:fliph(flipv);}
   file://*定义DIV范围内的样式,绝对定位,翻转为水平翻转或垂直翻转。
    注意:在这里fliph和flipv只取其中的一个*//
   img{position:absolute;top:70;left:40;
     filter:fliph(flipv);}
   file://*定义图片的样式,绝对定位,翻转属性和DIV一样。*//
    -->
   </style>
   </head>
   <body>
   <div>
   <p style=“font-family:bailey;font-size:36pt;
         font-weight:bold; color:rgb(10,128,156);”>
    Leaf Village </p>
   file://*定义字体名称、大小、粗细、颜色*//
   </div>
   <p><img src=“ss05058.jpg”></p>
   file://*导入一张图片*//
   </body>
  </html>
  代码产生的两个效果分别如下图:             


水平翻转      垂直翻转


  翻转的属性应用是不是很简单。



[网页制作]CSS滤镜之FlipH、FlipV属性  [网页制作]巧用CSS的Glow滤镜
[网页制作]DropShadow属性、Chroma属性和blur属性效果  [网页制作]实例详解CSS滤镜(6)Glow属性
[网页制作]alt属性和title属性  [Web开发]alt属性和title属性
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台