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

     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=http://www.webjx.com/htmldata/2005-02-23/“ss05058.jpg”></p>
   file://*导入一张图片*//
   </body>
  </html>
  代码产生的两个效果分别如下图:             

水平翻转      垂直翻转

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

时间: 2025-01-29 19:52:00

Invert属性、Glow属性和FlipH、FlipV属性的相关文章

java网络传递对象时该对象继承父类的属性在网络接收端接收该属性值总是null,why?

问题描述 java网络传递对象时该对象继承父类的属性在网络接收端接收该属性值总是null,why? //=========================== 情形一: ===============================//在网络上传递User1类对象时info属性值在网络的另一端能够接收到! public class User1 implements Serializable { public String info = null; public String userName =

json-js匀速运动框架,多属性运动,如何让每个属性都到达目标值?

问题描述 js匀速运动框架,多属性运动,如何让每个属性都到达目标值? 我想用onoff=true判断,可是,写好后,效果不好,还是只要有一个属性到达目标值,timer就会停止? 请前辈帮看下用onoff=true部分的代码,麻烦帮解决下这个问题?谢谢 <!doctype html> Demo <br> *{margin:0;padding:0;}<br> html,body{width:100%;height:100%;}<br> #div1{width:1

jquery 属性选择器(匹配具有指定属性的元素)_jquery

jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("

zoom属性只有当对象的position属性为absolute,或者relative;怎么解决

问题描述 zoom属性只有当对象的position属性为absolute,或者relative;怎么解决 zoom属性只有当对象的position属性为absolute,或者relative;怎么解决

有没有什么配置让hibernate自动持久化某个实体属性,而不级联更新这个属性

问题描述 有没有什么配置让hibernate自动持久化某个实体属性,而不级联更新这个属性 比如说,订单表中有客户资料,客户是界面选择的游离的实体对象,保存订单时应该只更新订单的客户ID,而不级联更新客户信息,目前是不用级联就会报org.hibernate.TransientObjectException: object references an unsaved transient instance.用级联就会修改客户数据,这个是业务不能接受的.目前我通过手工持久化客户对象是可以的,但是每个功能

大家好,请问这个属性是什么意思?一个属性是IEnumerable&amp;amp;lt;&amp;amp;gt;泛型接口类型是什么意思?

问题描述 publicoverrideIEnumerable<ModuleReference>Modules{get{//Pleasefillthismethodwithyourmoduleswithlineslikethis://yieldreturnnewModuleReference(typeof(Module));yieldreturnnewModuleReference(typeof(HelloModule));yieldreturnnewModuleReference(typeof

CSS滤镜:FlipH、FlipV属性

css|滤镜 Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转.它们的表达式很简单,分别是: Filter:FlipH Filter:FlipV 我们先来看一幅图:点击可放大   下面我们分别对它实现水平翻转和垂直翻转,并且在图片上方的一段文字,也发生翻转.代码如下: <html> <head> <title>flip css</title> <style>//*设置CSS样式开始*// <!-- div{po

CSS滤镜之FlipH、FlipV属性

css|滤镜 Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转.它们的表达式很简单,分别是: Filter:FlipH Filter:FlipV 我们先来看一幅图:点击可放大   下面我们分别对它实现水平翻转和垂直翻转,并且在图片上方的一段文字,也发生翻转.代码如下: <html> <head> <title>flip css</title> <style>//*设置CSS样式开始*// <!-- div{po

html属性-请问html 标签上的属性值怎么获取?

问题描述 请问html 标签上的属性值怎么获取? test 大神们!怎么能获取到 属性 abc 上的网址? 解决方案 通过正则表达示和js代码都可以的, 参考:http://m.blog.csdn.net/blog/mhmyqn/8205874 解决方案二: 用JQuery的话,很方便: <AAA id="tag" abc="www.baidu.com"> test </AAA> var url = $("#tag").a