如何讓火狐谷歌chrome等瀏覽器支援一些css濾鏡
阿新 • • 發佈：2019-02-07
要設定一下透明度為60%的DIV就應該這樣寫了：
div.transp { /* make the div translucent */
opacity: 0.6; /* Firefox, Safari(WebKit), Opera)
filter: "alpha(opacity=60)"; /* IE 8 */
filter: alpha(opacity=60); /* IE 4-7 */
zoom: 1; /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */
}
filter: "alpha(opacity=60)"; /* IE 8 */ 為IE下寫法，opacity: 0.6; 為火狐等瀏覽器下寫法，所以要都支援這個濾鏡，就得兩個都寫上（搞的這麻煩，看得出W3C標準規範化可以實現的好處了）
附：CSS 濾鏡詳解
CSS樣式表是一種為超文字標籤語言提供增強補充服務的技術，可對每一個html的標籤做精雕細刻的修飾。只用html製作的網頁，對頁面內各部分的修飾能力有限且語句煩鎖，樣式表正是彌補這一缺陷的有力技術，它語句文法簡單，只要在原始碼中插入style語句就可輕易實現頁面內任意文字顏色、背景、邊框、行距、字距的添刪和修飾等功能，使網頁更加生動活潑，從而獲得滿意的效果。當然，樣式表的強大還依靠的就是它的濾鏡功能。因為有了濾鏡，大家就可以輕易地創造出“專業”的藝術效果。為了能幫助大家高效使用好樣式表濾鏡，筆者將對樣式表濾鏡各方面的內容進行詳細介紹。
一、什麼是樣式表濾鏡
說到濾鏡，其實它並不是對影象進行了什麼處理，而是在瀏覽器中對使用了該屬性的物件進行一定的修飾。樣式表濾鏡實際上是樣式表一個新的擴充套件部分，使用這種技術簡單的語法就可以把視覺化的濾鏡和轉換效果新增到一個標準的html元素上，例如圖片、文字、以及其他一些物件，為頁面新增一些豐富的變化。如果大家有一些指令碼語言的基礎，能夠把濾鏡效果與類似javascript的指令碼程式碼做一些結合，就可以擁有一個在樣式表濾鏡與指令碼共同作用下建立的強大的動態互動文件工具。現在能使用的濾鏡有13個之多，不過要欣賞到這些濾鏡的特效，必須要求使用者的瀏覽器必須在IE4.0/NC6.0之上，因為只有這些版本的瀏覽器才能支援樣式表濾鏡效果。
二、常用的樣式表濾鏡
隨著樣式表技術的不斷成熟，其濾鏡功能和種類也在不斷增多。如果使用者能夠熟練地混合使用它們，將可以產生意想不到的效果。在操作上，使用者只需要瞭解具體濾鏡的實際效果後，就能根據實際進行微調了。為了使大家能有針對性地使用濾鏡，下面就把一些常用濾鏡的功能和引數詳細介紹如下：
1、α濾鏡
作用：該濾鏡可以實現各種溶入效果，如果大家將該濾鏡與網頁尾本語言結合起來，對濾鏡的引數進行處理的話，就能很輕易地做出淡入淡出的效果來。
語法：{FILTER：ALPHA(opacity=opacity，finishopacity=finishopacity，
style=style，startx=startx，starty=starty，finishx=finishx，finishy=finishy)}
引數：Opacity引數代表圖象的起始透明度，其預設的數值是從0到100，0代表完全透明，100代表完全不透明；FinishOpacity是一個可選引數，如果想要設定漸變的透明效果，就可以使用他們來指定結束時的透明度，作用範圍也是0到100；Style表示透明區域的形狀特徵，其中“0”代表統一形狀，“1”代表線形。“2”代表放射狀，“3”代表矩形；startx表示漸變透明效果開始處的X座標，starty代表漸變透明效果開始處的Y座標，finishx代表漸變透明效果結束處的X座標，finishy代表漸變透明效果結束處的Y座標。
2、模糊濾鏡
作用：該濾鏡主要是讓圖象產生一種模糊效果。
語法：{filter:blur(add=add，direction=direction，strength=strength)}
引數：該濾鏡主要包括三個引數，其中add是用來指定圖象是否被改變成印象派的模糊效果，模糊效果是按順時針的方向進行的，它的數值應該是ture或false；direction引數是用來設定模糊的方向的，其中0度代表垂直向上，每45度為一個單位，預設值是向左的270度；strength 引數代表有多少畫素的寬度將受到模糊影響，預設的引數值是5個畫素，而且該引數值只能使用整數來指定。
3、斜影濾鏡
作用：該濾鏡主要是為物件建立輪廓的影子效果的，它可以在指定的方向建立物體的投影；
語法：{filter:shadow(color=color,direction=direction)}
引數：斜影濾鏡只有兩個引數，其中color代表投影的底色，該數值是用英文字母來代替的，例如投影底色是紅色的話，就應該設定color=red;direction引數是用來設定投影方向的，如果該數值是0的話，就代表垂直投影，此外該數值每45度為一個單位，它的預設值是向左的270度。
4、發光濾鏡
作用：該濾鏡可以給圖象或者文字產生一種發光效果；
語法：{filter:glow(color=color,strength=strength)}
引數：該濾鏡的color引數與陰影濾鏡的color引數功能幾乎是一樣的，不過這裡的color引數是用來設定發光顏色的;strength引數是用來指定發光強度的，其值為1到255之間的任何整數。
5、燈光濾鏡
作用：燈光濾鏡是模擬光源來投射文字或者圖象，使圖象和文字能產生一定的投射效果；
語法：{filter:light}
引數：一旦為物件定義了“light"濾鏡屬性後，大家就可以呼叫它的“方法(Method)"來設定或者改變屬性，該濾鏡可用的方法有：AddAmbient方法是用來加入包圍光源的，AddCone方法是用來加入錐形光源的，MoveLight方法是用來移動光源的，Changstrength方法是用來改變光源強度的，Changcolor方法是用來改變光的顏色的，Clear方法是用來清除所有光源的。
6、遮罩濾鏡
作用：該濾鏡可以為物件建立一個覆蓋於表面的膜，其效果就象戴著有色眼鏡看物體一樣。
語法： {filter:mask(color=color)}
引數：該濾鏡的color引數表示覆蓋物件表面的顏色，例如如果遮罩顏色為綠色，那麼就應該設定color=blue。
7、陰影濾鏡
作用：陰影濾鏡就是給物件新增陰影效果，其工作原理是建立一個偏移量，加上色彩。
語法：{filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive)}
引數：該濾鏡中的Color引數表示投射陰影的顏色，offx 表示水平方向陰影的偏移量，offy 表示豎直方向陰影的偏移量，Positive引數是一個布林值，其數值如果為TRUE，就為任何的非透明畫素建立可見的投影，如果為FASLE，就為透明的畫素部分建立透明效果。
8、灰度濾鏡
作用：該濾鏡主要是將圖象物件轉換成灰度形式顯示。
語法：{filter:gray}
引數：該濾鏡沒有引數。
9、翻轉濾鏡
作用：翻轉濾鏡主要是實現圖象物件的水平或者豎直翻轉效果。
語法：{filter:filph} {filter:filpv}
引數：這種濾鏡也不帶引數，其中{filter:filph}是實現水平翻轉的，{filter:filpv} 是實現豎直翻轉的。
10、X光濾鏡
作用：X光濾鏡可以讓物件反映出它的輪廓並把這些輪廓加亮。
語法： {filter:xray}
引數：該濾鏡本身不含有引數。
11、倒置濾鏡
作用：使用該濾鏡可以把包括色彩、飽和度、和亮度值等物件的視覺化屬性全部翻轉。
語法： {filter:invert}
引數：該濾鏡沒有引數。
12、波紋濾鏡
作用：波紋濾鏡可以在水平和豎直方向利用正弦波打亂圖象，使圖象產生水波效果。
語法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
引數：該濾鏡的add引數是一個布林數值，它是用來表示是否要把物件按照波形樣式打亂；freq引數是用來設定波紋頻率的，也就是指定在物件上一共需要產生多少個完整的波紋；lightstrength引數可以設定波紋光影的增強效果的，其數值範圍在0到100之間；phase引數是用來設定正弦波的偏移量的，strength是設定正弦波的振幅大小的。