filter IE濾鏡（Internet Explorer）CSS

收集一些IE濾鏡,留作之後開發用.


透明度


#myElement {
     opacity: .4; /* other browsers */
     filter: progid: DXImageTransform.Microsoft.Alpha( opacity=40 ); /* IE6, IE7, and IE8 */
     -ms-filter : "progid:DXImageTransform.Microsoft.Alpha( opacity=40 )"; /* IE8 only */
 }
 PNG圖檔透明度


.Transparent{
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/nav_bg.png);
_background:none;
 }
陰影


.box-shadow {
     -moz-box-shadow: 2px 2px 3px #969696; /* Firefox */
     -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */
     filter: progid:DXImageTransform.Microsoft.Shadow( color='#969696', Direction=145, Strength=3 );
 }
漸變


#gradient {
background-image: -moz-linear-gradient( top, #81a8cb, #4477a1 ); /* Firefox 3.6 */
background-image: -webkit-gradient(linear , left bottom , left top , color-stop( 0, #4477a1 ) , color-stop( 1, #81a8cb )); /* Safari & Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = '#81a8cb', endColorstr = '#4477a1' ); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#81a8cb', endColorstr = '#4477a1' )"; /* IE8 */
 }
背景色透明(RGBA)


 #rgba p {
     background: rgba( 98, 135, 167, .4 );  /* other browsers */
     filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#886287a7', endColorstr = '#886287a7' );  /* IE */
 }
多背景


#multi-bg {
  /* other browsers */
 background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
 /* IE */
     background: transparent url(images/bg-image-1.gif) top left repeat;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src = 'images/bg-image-2.gif', sizingMethod = 'crop'); /* IE6-8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src = 'images/bg-image-2.gif', sizingMethod = 'crop')"; /* IE8 only */
 }
旋轉


#rotate {
     -webkit-transform: rotate(180deg); /* Safari and Chrome */
     -moz-transform: rotate(180deg); /* Firefox */
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 2); /* IE */
 }
其他

CSS濾鏡雖然隻能在IE浏覽器中表現出效果，但是仍不失為網頁增加特效的好辦法。

1．CSS靜态濾鏡樣式（filter）

CSS靜态濾鏡樣式的使用方法：{ filter : filtername( parameters1, parameters2, ...) }

Filter樣式簡要說明支援參數

alpha 設定圖檔或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength

blur 在指定的方向和位置上産生動感模糊效果 add、direction、strength

chroma 對所選擇的顔色進行透明處理 color

dropShadow 在指定的方向和位置上産生陰影 color、offX、offY、positive

flipH 沿水準方向翻轉對象　

flipV 沿垂直方向翻轉對象　

glow 在對象周圍上發光 color、strength

gray 将對象以灰階處理　

invert 逆轉對象顔色　

light 對對象進行模拟光照　

mask 對對象生成掩膜 color

shadow 沿對象邊緣産生陰影 color、direction

wave 在垂直方向産生正弦波形 add、freq、lightStrength、phase、strength

xray 改變對象顔色深度，并繪制黑白圖象

以上就是靜态濾鏡的全部内容，要注意的是CSS是區分大小寫的！

2．CSS動态濾鏡

動态濾鏡可以為頁面添加動人的淡入淡出、圖象轉化效果，它可以分為兩種blend（混合）和reveal（顯示），前者可以使對象漸漸消失或出現，後者提供了24種圖象轉化的效果。對于動态濾鏡的調用除去象在靜态濾鏡中要定義的濾鏡類型，參數等等，還用到腳本語言控制它的狀态。

首先，在開始一個動态效果之前，先需要進行裝備（Apply），然後播放（Play）動态效果，在動态效果進行中還可以中斷動态效果（Stop），以上可以用下面的方法實作：

對象名.filters(濾鏡數值).Apply()

對象名.filters(濾鏡數值).Play()

對象名.filters(濾鏡數值).Stop()

對于濾鏡狀态的判斷可以通過“對象名.filters(濾鏡數值).status”判斷，該值為0時，表示濾鏡未執行，為1時，表示濾鏡已經完成，為2時表示濾鏡在執行中。在定義filter時，如上面所提到的，可以有混合（“filter:blendTrans(duration=時間數值)”，duration表示濾鏡執行需要的時間，機關為秒）和顯示（“filter:revealTrans(duration=時間數值,transition=過渡類型)”，過渡類型為從0－23的數值）兩種。

濾鏡目前還未被W3C正式承認。濾鏡隻是微軟IE浏覽器的組成部分，不能用于Netscape浏覽器。制定有關标準的組織正在就此進行讨論，但尚未達成最後定論。在我看來，濾鏡是一種非常有趣而且是制作精彩的視覺效果必不可少的一部分。濾鏡能節省帶寬，而且是你能在制作奇妙的視覺設計時使用文字格式，而不必先制作龐大的文字位圖以取得相同的效果。但由于這些功能尚未成為HTML的正式組成部分，是以并不是所有的浏覽器都能看到這些特色。有些時候，你必須考慮以傳統的方式制作相同的效果，當然，你不得不繼續将龐大的GIF檔案塞到網頁之中。

執行個體講解

現在非常多的朋友搞個人網頁，而且做的五彩缤紛，各有特色，但是比較多的朋友把大大的一幅圖象放在頁面上，緻使頁面下載下傳很慢，加上用GIF格式做動畫，盡管用GIF格式搞的動畫比較苗條，但是也不大合算。能否不用特别做的圖象，不用GIF格式做動畫，可以把頁面搞的生氣活現呢？可以，但 JAVASCRIPT比較對一般初學者來說是比較難的，筆者今天要用IE本身内含的STYLE這個重量級的指令屬性中的RevealTrans和濾鏡來搞搞新意思！希望網友們能靈活運用這些濾鏡和頁面切換效果，把自己的首頁搞的有聲有色！不斷進步！

Style屬性可以應用在标簽中，更可用廣泛應用在<table><tr><td><body><center><img><input><font><form><frame><label><map> 等等标簽中，更重要的是，它可用在标簽中。

頁面切換效果：

在頁面前部與之間加入""

說明：duration為頁面切換的時間長度，3.000表示3秒鐘，一般可以直接輸入3便可；transition為切換效果，從1-23共22種不同的切換效果，其中23為随機效果。

濾鏡效果：

Photoshop的濾鏡用的多了吧，在頁面中也用濾鏡搞搞新意思吧！

文法: filter:filtername(fparameter1,fparameter2...)

(Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數)

濾鏡說明：

Alpha：設定透明層次.

blur：建立高速度移動效果，即模糊效果.

Chroma：制作專用顔色透明.

DropShadow：建立對象的固定影子.

FlipH：建立水準鏡像圖檔.

FlipV：建立垂直鏡像圖檔.

glow：加光輝在附近對象的邊外.

gray：把圖檔灰階化.

invert：反色.

light：建立光源在對象上.

mask：建立透明掩膜在對象上.

shadow：建立偏移固定影子.

wave：波紋效果.

Xray：使對象變的像被x光照射一樣.

1、濾鏡：Alpha

文法：filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity，Style=style,StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)

說明：

Opacity：起始值，取值為0～100, 0為透明，100為原圖。

FinishOpacity：目标值。

Style：1或2或3

StartX：任意值

StartY：任意值

例子：filter:Alpha(Opacity="0",FinishOpacity="75",2)

2、濾鏡：blur

文法：filter:Blur(Add = add, Direction = direction, Strength = strength)

說明：

Add：一般為1，或0。

Direction：角度，0～315度，步長為45度。

Strength：效果增長的數值，一般5即可。

例子：filter:Blur(Add="1",Direction="45",Strength="5")

3、濾鏡：Chroma

文法：filter:Chroma(Color = color)

說明：color：#rrggbb格式，任意。

例子：filter:Chroma(Color="#FFFFFF")

4、濾鏡：DropShadow

文法：filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)

說明：Color:#rrggbb格式，任意。

Offx：X軸偏離值。

Offy：Y軸偏離值。

Positive：1或0。

例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5、濾鏡：FlipH

文法：filter:FlipH

例子：filter:FlipH

6、濾鏡：FlipV

文法：filter:FlipV

例子：filter:FlipV

7、濾鏡：glow

文法：filter:Glow(Color=color, Strength=strength)

說明：

Color：發光顔色。

Strength：強度(0－100)

例子：filter:Glow(Color="#6699CC",Strength="5")

8、濾鏡：gray

文法：filter:Gray

例子：filter:Gray

9、濾鏡：invert

文法：filter:Invert

例子：filter:Invert

10、濾鏡：mask

文法：filter:Mask(Color=color)

例子：filter:Mask (Color="#FFFFE0")

11、濾鏡：shadow

文法：filter:Shadow(Color=color, Direction=direction)

說明：

Color：#rrggbb格式。

Direction：角度，0－315度，步長為45度。

例子：filter:Shadow (Color="#6699CC", Direction="135")

12、濾鏡：wave

文法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase， Strength=strength)

說明：

Add：一般為1，或0。

Freq：變形值。

LightStrength：變形百分比。

Phase：角度變形百分比。

Strength：變形強度。

例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13、濾鏡：Xray

文法：filter:Xray

例子：filter:Xray;

14.顔色變化

文法：filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#B5CCFA", EndColorStr="#B5CCFA");

Filter 為微軟的專有技術，并被應用到 IE4.0 及以上的 IE 浏覽器中，是以隻有 IE 支援。其他浏覽器中對 Filter 無任何效果。調用 Filter 對應的 DOM 對象将會出錯。

filter IE濾鏡（Internet Explorer）CSS

IE4.0 以上版本的 IE 浏覽器中可以通過 CSS 在網頁中應用多種多媒體樣式的視覺效果，這就是微軟的 Filter 技術。随着 IE 版本的增加，并在各版本中不斷的加強 Filter 效果。通過将 Filter 與腳本的結合，可以在頁面中實作各種複雜的特效，如半透明、陰影、投影、遮罩、模糊、漸變、波浪、圖檔翻轉等效果。

透明效果：filter:alpha(opacity=50);

黑白照片：filter: gray;

X光照片：filter: Xray;

風動模糊：filter: blur(add=true,direction=45,strength=30);

正弦波紋：filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);

半透明效果：filter: Alpha(Opacity=50);

線型透明：filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);

放射透明：filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);

白色透明：filter: Chroma(Color=#FFFFFF);

降低色彩：filter: grays;

底片效果：filter: invert;

左右翻轉：filter: fliph;

垂直翻轉：filter: flipv;

投影效果：filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);

馬賽克：filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);

發光效果：filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);

柔邊效果：filter:alpha(opacity=100, finishOpacity=0,style=2;

許多 Filter 中的特效均已進入了 CSS3 草案，并在新版的非 IE 浏覽器中得到了很好的支援。

Microsoft.AlphaImageLoader濾鏡講解

Microsoft.AlphaImageLoader 是IE濾鏡的一種，其主要作用就是對圖檔進行透明處理。雖然FireFox和IE7以上的IE浏覽器已經支援透明的PNG圖檔，但是就IE5-IE6而言還是有一定的意義。

文法： filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled= bEnabled , sizingMethod= sSize , src= sURL ) 屬性：

enabled

可選項。布爾值(Boolean)。設定或檢索濾鏡是否激活。true | false

true	:	預設值。濾鏡激活。
false	:	濾鏡被禁止。

sizingMethod

可選項。字元串(String)。設定或檢索濾鏡作用的對象的圖檔在對象容器邊界内的顯示方式。

crop	:	剪切圖檔以适應對象尺寸。
image	:	預設值。增大或減小對象的尺寸邊界以适應圖檔的尺寸。
scale	:	縮放圖檔以适應對象的尺寸邊界。

src

必選項。字元串(String)。使用絕對或相對 url 位址指定背景圖像。假如忽略此參數，濾鏡将不會作用。

特性：

Enabled	:	可讀寫。布爾值(Boolean)。參閱 enabled 屬性。
sizingMethod	:	可讀寫。字元串(String)。參閱 sizingMethod 屬性。
src	:	可讀寫。字元串(String)。參閱 src 屬性。

說明：在對象容器邊界内，在對象的背景和内容之間顯示一張圖檔。并提供對此圖檔的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。

PNG(Portable Network Graphics)格式的圖檔的透明度不妨礙你選擇文本。也就是說，你可以選擇顯示在PNG(Portable Network Graphics)格式的圖檔完全透明區域後面的内容。示例： #idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rain1977.gif',sizingMethod='scale');}

.dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif');}

P.S. 當想使用backgroundimage屬性時，如果不想讓圖檔原尺寸顯示，而是類似于IMG width=100% heigth=100% 的效果，可以通過此filter實作。

Css代碼

filter IE濾鏡（Internet Explorer）CSS

span.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.jpg', sizingMethod='scale')";

引用：最後說說關于FF和IE效果調和問題。這個濾鏡效果隻适用于IE,在FF下面無法顯示，我想這是前輩說他很難實作的最終問題了。以往我們用*或者_來修複IE下和FF的差別．這一次是要找方法修複FF不能實作的問題.

其實想到的話,也很簡單了.就是先讓FF正常顯示該圖檔,然後,用*或_ 來清除IE下的顯示效果，最後用*或_ 來做以上的濾鏡效果。大功告成！

以上是官方的說明。事實上實際操作中需要注意:AlphaImageLoader濾鏡會導緻該區域的連結和按鈕無效，一般情況下的解決辦法是為連結或按鈕添加：position:relative使其相對浮動要注意的是，當加載濾鏡的區域的父層有position:absolute絕對定位的時候使用position:relative也不能使連結複原。建議使用浮動辦法處理。

具體操作：

1. 為預覽區域（比如要在某個 div 中預覽）添加樣式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
2. 為 AlphaImageLoader 設定 src 屬性。

filter IE濾鏡（Internet Explorer）CSS

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條