Invert屬性、Glow屬性和FlipH、FlipV屬性

來源:互聯網
上載者:User

     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>
  代碼產生的兩個效果分別如下圖:             


水平翻轉      垂直翻轉


  翻轉的屬性應用是不是很簡單。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。