filter IE濾鏡（Internet Explorer）CSS

時間 2019-11-11

標籤 filter 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瀏覽器中表現出效果，可是仍不失爲網頁增長特效的好辦法。javascript

1．CSS靜態濾鏡樣式（filter）css

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

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 改變對象顏色深度，並繪製黑白圖象web

以上就是靜態濾鏡的所有內容，要注意的是CSS是區分大小寫的！瀏覽器

2．CSS動態濾鏡app

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

首先，在開始一個動態效果以前，先須要進行裝備（Apply），而後播放（Play）動態效果，在動態效果進行中還能夠中斷動態效果（Stop），以上能夠用下面的方法實現：url

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

對於濾鏡狀態的判斷能夠經過「對象名.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爲濾鏡的名稱，fparameter一、fparameter2等是濾鏡的參數)

濾鏡說明：
Alpha：設置透明層次.
blur：建立高速度移動效果，即模糊效果.
Chroma：製做專用顏色透明.
DropShadow：建立對象的固定影子.
FlipH：建立水平鏡像圖片.
FlipV：建立垂直鏡像圖片.
glow：加光輝在附近對象的邊外.
gray：把圖片灰度化.
invert：反色.
light：建立光源在對象上.
mask：建立透明掩膜在對象上.
shadow：建立偏移固定影子.
wave：波紋效果.
Xray：使對象變的像被x光照射同樣.

一、濾鏡：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)

二、濾鏡：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")

三、濾鏡：Chroma
語法：filter:Chroma(Color = color)
說明：color：#rrggbb格式，任意。
例子：filter:Chroma(Color="#FFFFFF")

四、濾鏡：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")

五、濾鏡：FlipH
語法：filter:FlipH
例子：filter:FlipH

六、濾鏡：FlipV
語法：filter:FlipV
例子：filter:FlipV

七、濾鏡：glow
語法：filter:Glow(Color=color, Strength=strength)
說明：
Color：發光顏色。
Strength：強度(0－100)
例子：filter:Glow(Color="#6699CC",Strength="5")

八、濾鏡：gray
語法：filter:Gray
例子：filter:Gray

九、濾鏡：invert
語法：filter:Invert
例子：filter:Invert

十、濾鏡：mask
語法：filter:Mask(Color=color)
例子：filter:Mask (Color="#FFFFE0")

十一、濾鏡：shadow
語法：filter:Shadow(Color=color, Direction=direction)
說明：
Color：#rrggbb格式。
Direction：角度，0－315度，步長爲45度。
例子：filter:Shadow (Color="#6699CC", Direction="135")

十二、濾鏡：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")

1三、濾鏡：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 對象將會出錯。

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代碼

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也不能使連接復原。建議使用浮動辦法處理。

具體操做：

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。