CSS半透明濾鏡在FIREFOX和IE下面的能夠通用的寫法

來源:互聯網
上載者:User

CSS半透明濾鏡在FIREFOX和IE下面的能夠通用的寫法,記錄下來備用:

CSS代碼
.test{   
  background:#000;   
  color:white;   
  width:200px;   
  position:absolute;   
  left:10px;   
  top:10px;   
   filter: Alpha(opacity=10);   
   -moz-opacity:.1;   
   opacity:0.1;   
}  
這裡關鍵的是

CSS代碼
filter: Alpha(opacity=10);   
   -moz-opacity:.1;   
   opacity:0.1;  
這三句,第一句是ie 支援.第二三句是firefox支援的,但是版本不一樣就有兩種了,所以用時候把三句都加上就行了

 

 

 

效果:CSS 濾鏡屬性(圖片透明)

  

用於定製圖片的顯示效果

1)濾鏡的有效HTML標記:

BODY 

BUTTON  

DIV    

IMG  

INPUT  

MARQUEE   

SPAN   

TABLE   

TD   

TEXTAREA   

TH  

TR  

2)濾鏡的屬性參數

a) 設定透明度Alpha  

文法: { FILTER: Alpha(Opacity=n1,Finishopacity=n2,Style=#,Startx=x1,Starty=y1,Finishx=x2,Finishy=y2)}
"Opacity"透明度.從0到100,0代表完全透明.100代表完全不透明.
"Finishopacity"可選,指定結束時的透明度.0到100.
"Style"透明地區形狀.其中#可為:0代表統一形狀,1線形,2放射狀,3長方形.
"Startx"和"Starty"漸層透明效果的開始X和Y座標.
"Finsihx"和"Finsihy"漸層透明效果結束X和Y的座標.
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

b) 模糊Blur   

文法:{filter:blur(add=add,direction=direction,strength=strength)}
"add""TRUE(預設)"或者"FALSE".指定圖片是否被改變成印象派的模糊效果.1為真,0為假
"direction"設定模糊的方向.0垂直向上,每45度為一個單位.預設值向左的270度.
"strength"有多少像素的寬度受到模糊影響,預設是5個像素.

 

c) 透明 Chroma  

把指定的顏色設定為透明
文法: {filter:chroma(color=color)}

COLOR,設定為透明色的顏色的值

舉例:

<img style="filter:chroma(color=white)" src="圖片" width="26" height="15" > 

d) 投射陰影DropShadow  

文法: {filter:Dropshadow(Color=color,Offx=x,Offy=y,positive=positive)}
"Color"陰影顏色
"Offx"和"Offy"是X方向和Y方向陰影的位移量.
"Positive"如果為"True"為任何的非透明像素建立可見的投影.如果為"False",為透明的像素部分建立可見的投影. 

e) 翻轉 FlipH, FlipV  

文法:{filter: FlipH} ,{filter: FlipV}

分別是將對象水平反轉和垂直反轉 

f)對象的外邊界增加光效Glow 

文法:{filter:Glow(Color=color,Strength=n)}

 "Color"發光色
"Strength"強度從1到255 

g)圖象色彩轉換

Gray灰階   Invert反色   Xray映出圖象輪廓並把這些輪廓加亮(X光效果,灰階後反色)
文法: {filter:gray} {filter:invert} {filter:xray} 

h) 陰影製作效果Shadow  

文法: {filter:shadow(Color=color,Direction=direction)}
Color投影色
Direction投影.0度垂直向上,然後每45度為一個單位.預設值是向左的270度. 

i) 正弦波紋Wave  

在X軸和Y軸方向利用正弦波紋打亂圖片

文法: {filter:wave(Add=True/False,Freq=n,Lightstrength=n1,Phase=n2,Strength=n3)}
"Add"是否打亂,預設是"True".
"Freq"產生多少個完整的波紋.
"LightStrength"增強光影,0-100的整數值.
"Phase"正弦波的位移量,通常值為0,範圍是0-100的整數值
"Strength"代表振幅大小.

 

相關文章

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.