執行個體詳解CSS濾鏡(4)Chroma屬性

來源:互聯網
上載者:User
css|濾鏡|詳解 Chroma屬性可以設定一個對象中指定的顏色為透明色,它的運算式如下:

  Filter:Chroma(color=color)

  這個屬性的運算式是不是很簡單,它只有一個參數。只需把您想要指定透明的顏色用Color參數設定出來就可以了。比如下面這幅圖:

  圖中顯示兩種字型,兩種顏色,我們現在對“leaves”字型添加chroma屬性,使其透明。代碼如下:

  <html>
   <head>
   <title>chroma filter</title>
   <style>
   <!--
    div{position:absolute;top:70;width:200;
      filter:chroma(color=green)}
   //*定義DIV範圍內綠色為透明色,另外設定DIV的位置*//
   p{font-family:bailey;font-size:48;font-weight:bold;
   color:green} //*設定P的字型名稱、大小、粗細、顏色*//
   em{font-family:lucida handwriting italic;font-size:48;
   font-weight:bold;color:rgb(255,51,153)}
   //*設定EM的字型名稱、大小、粗細、顏色*//
   -->
   </style>
   </head>
   <body>
   <div>
   <p>LEAVES <em>LOVE</em></p>
   </div>
   </body>
  </html>

  通過上面代碼中對chroma的屬性設定,使綠色透明。顯示效果如下圖:

 

  我們看到綠色的leaves字型不見了,實際上它是透明了,在IE下點擊它所在的地區,它還是會顯示出來(見下圖):

  另外,需要注意的是,chroma屬性對於圖片檔案不是很適合。因為很多圖片是經過了減色和壓縮處理(比如JPG、GIF等格式),所以它們很少有固定的位置可以設定為透明。



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。