精通 CSS 濾鏡三

來源:互聯網
上載者:User

1、Alpha 濾鏡
    
     文法:{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,
startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
      "Alpha"屬性是把一個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定座標,可以指定點、線、面的透明度。他們的參數含義分別如下:
     “opacity"代表透明度水準。預設的範圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。”finishopacity"是一個選擇性參數,如果想要設定漸層的透明效果,就可以使用他們來指定結束時的透明度。範圍也是0 到 100。“style" 參數指定了透明地區的形狀特徵。其中0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。”STARTX“和”STARTY“代表漸層透明效果的開始X和Y座標。”FINISHX“和”FINISHY“代表漸層透明效果結束X和Y 的座標。
效果如下:

2、Blur 濾鏡
文法:對於HTML:{ilter:blur(add=add,direction=direction,strength=strength)}
      對於s cript語言: [oblurfilter=] object.filters.blur
用手指在一幅尚未乾透的油畫上迅速划過時,畫面就會變得模糊。”Blur"就是產生同樣的模糊效果。
“ADD”參數是一個布爾判斷“TRUE(預設)”或者“FALSE”。它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的,“DIRECTION”參數用來設定模糊的方向。其中0度代表垂直向上,然後每45度為一個單位。它的預設值是向左的270度。“STRENGTH“值只能使用整數來指定,她代表有多少像素的寬度將受到模糊影響。預設是5個。對於網頁上的字型,如果設定他的模糊”ADD=1“,那麼這些字型的效果會非常好看的。如下:
filter:blur(add=ture,direction=135,strength=10)
我向你飛,雨溫柔地綴!

3、FlipH, FlipV 濾鏡
    文法:{filter:filph} ,{filter:filpv} 分別是水平反轉和垂直反轉,具體如下:

4、Chroma 濾鏡
文法:{filter:chroma(color=color)}
         使用”Chroma"屬性可以設定一個對象中指定的顏色為透明色,參數COLOR即要透明的顏色。下面是蘭色文字,然後用Chroma 濾鏡過濾掉蘭色,就成了下面的樣子。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.