css3filter過濾器

Ⅰ CSS樣式 過濾器的問題!

濾鏡效果 | 功能描述
-----------------------------------------------
Alpha | 設置不同的透明度變化效果
-----------------------------------------------
Blur | 建立模糊效果
-----------------------------------------------
DropShadow| 建立一種偏移的影象輪廓，即投射陰影
-----------------------------------------------
FlipH | 水平翻轉
-----------------------------------------------
FlipV | 垂直翻轉
-----------------------------------------------
Glow | 為對象的邊界增加色彩光效
-----------------------------------------------
Gray | 將圖片以灰度形式顯示
-----------------------------------------------
Invert | 將色彩、飽和度以及亮度值完全反轉,類似底片效果
-----------------------------------------------
Light | 在一個對象上進行燈光投影
-----------------------------------------------
Mask | 為一個對象建立彩色透明遮罩
-----------------------------------------------
Shadow | 為對象建立輪廓的影效果
-----------------------------------------------
Wave | 在X軸和Y軸方向利用正弦波打亂圖片
-----------------------------------------------
Xray | 只顯示對象的輪廓
-----------------------------------------------
----------------括弧裡面的是參數。-------------

細致的解釋看下面：
1、Alpha 濾鏡
"Alpha"屬性是把一個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種「與背景混合」通俗地說就是一個元素的透明度。通過指定坐標，可以指定各種不同范圍的透明度。
Alpha 濾鏡語法
{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、Blur 濾鏡

用手指在一幅尚未乾透的畫面迅速劃過時，畫面就會變得模糊。」Blur"就是產生同樣的模糊效果。

Blur濾鏡語法 HTML：{filter:blur(add=add,direction=direction,
strength=strength)}
Script語言： [oblurfilter=] object.filters.blur

參數含義分別如下：

參數 說明
add 它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的，
這是一個布爾值:ture （默認）或false
direction 該參數用來設置模糊的方向。
0度代表垂直向上，每45度為一個單位，默認值是向左的270度
strength 只能使用整數來指定，代表有多少像素的寬度將受到模糊影響，默認是5個像素。

3、DropShadow 濾鏡

「DropShaow"，顧名思義就是添加對象的陰影效果。其工作原理是建立一個偏移量，加上色彩。

DropShadow 濾鏡語法 {filter:dropshadow
(color=color,offx=ofx,offy=offy,positive=positive)}

參數含義如下：

參數 說明
Color 代表投射陰影的顏色
offx X方向陰影的偏移量
offy Y方向陰影的偏移量
Positive 布爾值
如果為TRUE（非0），就為任何的非透明像素建立可見的投影
如果為FASLE（0），就為透明的像素部分建立透明效果
4、FlipH, FlipV 濾鏡

FlipH 濾鏡實現水平反轉

FlipH 濾鏡語法 {filter:filph}

FlipV 濾鏡實現垂直反轉

FlipV 濾鏡語法 {filter:filpv}
5、Glow 濾鏡

對一個對象使用"glow"屬性後，這個對象的邊緣就會產生類似發光的效果。

Glow 濾鏡語法 {filter:glow(color=color,strength)}

參數含義如下：

參數 說明
Color 指定發光的顏色
STRENGTH 強度，值為1到255之間的任何整數，指定發光色力度和范圍。
6、Gray 濾鏡

使用Gray濾鏡可以把一張圖片變成灰度圖，語法很簡單：

Gray 濾鏡語法 {filter:gray}

7、Invert濾鏡
使用Invert濾鏡可以把對象的可視化屬性全部翻轉，包括色彩、飽和度、和亮度值

Invert 濾鏡語法 {filter:invert}

8、Xray濾鏡
使用Xray濾鏡可以讓對象反映出它的輪廓並把這些輪廓加亮，類似於所謂的「X」光片。

Xray 濾鏡語法 {filter:xray}
9、Mask 濾鏡

Mask 濾鏡語法 {filter:mask(color=color)}

使用"MASK"屬性可以為對象建立一個覆蓋於表面的膜，其效果就象戴著有色眼鏡看物體一樣 。

10、Light 濾鏡

Light 濾鏡語法 {filter:light}

這個屬性模擬光源的投射效果。一旦為對象定義了「LIGHT"濾鏡屬性，那麼就可以調用它的「方法(Method)"來設置或者改變屬性。「LIGHT"可用的方法有：

參數 說明
AddAmbient 加入包圍的光源
AddCone 加入錐形光源
AddPoint 加入點光源
Changcolor 改變光的顏色
Changstrength 改變光源的強度
Clear 清除所有的光源
MoveLight 移動光源

我們可以定義光源的虛擬位置，以及通過調整X軸和Y軸的數值來控制光源焦點的位置，還可以調整光源的形式（點光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態的設置光源，可能會產生一些意想不到的效果。
11、Shadow 濾鏡

Shadow 濾鏡
語法 {filter:shadow(color=color,direction=direction)}

利用「Shadow」屬性可以在指定的方向建立物體的投影，COLOR是投影色，DIRECTION是設置投影的方向。其中0度代表垂直向上，然後每45度為一個單位。它的默認值是向左的270度。

12、Wave 濾鏡

Wave 濾鏡
語法 {filter:wave(add=add,freq=freq,
lightstrength=strength,
phase=phase,strength=strength)}

參數 說明
wave 把對象按垂直的波形樣式打亂。
默認是 TRUE（非0）
ADD 是否要把對象按照波形樣式打亂
FREQ 波紋的頻率，也就是指定在對象上一共需要產生多少個完整的波紋
LIGHTSTRENGTH 可以對於波紋增強光影的效果，范圍0----100
PHASE 設置正弦波的偏移量
STRENGTH 振幅大小
--------------------------------------------------------------

內容很多，慢慢看。還有這個問題發到電腦那塊的話肯定有很多人回答的。

資料來天極網~

Ⅱ Dreamweaver cs6中CSS樣式里的過濾器沒有效果怎麼回事兒

你這個只有ie8以下才有效果吧，這個filter是濾鏡 只有ie能識別

Ⅲ css的filter:gray沒效果

主要發揮作用的樣式
過濾器以下兩行：灰色;

-webkit的過濾器：灰度（100％）;

過濾器的意思過濾器，濾芯：灰色的意思是說一個灰色的濾光頁，裡面的所有內容的HTML變成黑色和白色。然而，這種過濾器是無效的Chrome和Safari瀏覽器，所以下面會有一排

-webkit的過濾器：灰度（100％）;

這種風格是專為使用webkit核心的瀏覽器，意義和過濾：灰色差不多，只是以不同的方式寫什麼。

。幻燈片口罩{

過濾：無;

不透明度：無;

}
幾行和頁黑白無所謂，它的作用應該是關注的焦點網站過濾器除去。

Ⅳ html div css為什麼我瀏覽器顯示的圖片沒有變成灰色

1、CSS Filter

使用CSS過濾器屬性可能是最簡單的方法把圖像變成灰度。以往,IE瀏覽器有一個專有的CSS屬性稱為過濾應用自定義效果包括灰度。

現在,過濾器屬性是CSS3規范的一部分,並支持在一些瀏覽器,Firefox、Chrome和Safari。以前,我們也提到Webkit過濾器,它不僅將圖像變成灰色也可以變成褐色和模糊效果。

添加如下CSS樣式可以將圖像變成灰色

代碼如下:

img {
-webkit-filter: grayscale(1);/* Webkit */
filter:gray;/* IE6-9 */
filter: grayscale(1);/* W3C */
}

支持IE6-9和Webkit瀏覽器(Chrome 18+, Safari 6.0+, and Opera 15+)

(注意:這段代碼在Firefox上無效果。)

2、Javascript

第二種方法是通過使用JavaScript技術上應該支持所有JavaScript的瀏覽器,包括IE6以下

代碼來自Ajax Blender.

代碼如下:

varimgObj = document.getElementById('js-image');
functiongray(imgObj) {
varcanvas = document.createElement('canvas');
varcanvasContext = canvas.getContext('2d');
varimgW = imgObj.width;
varimgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(vary = 0; y < imgPixels.height; y++){
for(varx = 0; x < imgPixels.width; x++){
vari = (y * 4) * imgPixels.width + x * 4;
varavg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
returncanvas.toDataURL();
}
imgObj.src = gray(imgObj);

3、SVG

第三種方法來自SVG Filter.，你需要創建一個SVG文件,並將以下代碼寫在裡面，保存命名為***.svg

代碼如下:

<svgxm .w3.org/2000/svg">
<filterid="grayscale">
<feColorMatrixtype="matrix"values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
然後利用過濾器的屬性，我們可以通過SVG文件中的元素的ID連接SVG文件
[code]
img {
filter:url('img/gray.svg#grayscale');
}

Ⅳ CSS3哪些新特性值得稱贊

簡單的說，CSS3把很多以前需要使用圖片和腳本來實現的效果，只需要短短幾行代碼就能搞定。
1、CSS進行漸變背影的設置，在background中添加了linear-gradient線性漸變，
background: linear-gradient(yellow 0%, #000 80%); /*從0%黃色到80%黑色的漸變*/
2、CSS 3D
perspective:查看視圖的位置，如拍照時的鏡頭位置一樣。
transform-style中preserve-3d，設置了此屬性時，將子元素包裹在一個3D視圖里。
3、CSS animation
說到動畫就不得不說jQuery的animation。但有了CSS3後就再也不用JS進行製作動畫了。
keyframes定義幀動畫，可根據百分比進行設置，也可利用from和to的方式進行設置。
利用animation引用定義好的keyframes幀動畫。animation:rotate 20s infinite linear; /*設置引用的動畫，動畫時間，動畫的timing-function,動畫方式*/
4、CSS filter
fileter並非IE的過濾器，是CSS3中新添加的屬性。
包含效果有：grayscale灰度，sepia褐色，saturate飽和度,hue-rotate色相旋轉,invert反色,opacity透明度,brightness亮度,contrast對比度,blur模糊,drop-shadow陰影.
擠壓效果就是利用filter中的blur加saturate混合而來

Ⅵ html/css編程如何處理瀏覽器兼容問題

這個需要一點經驗，大致是：首先盡量寫瀏覽器都兼容的樣式，用都兼容的標簽，比如table比div兼容性好，比較好控制；
其次就是用css hack了，比如：*height:50px，這個*只對IE有效；_height:50px則只對IE7和IE6有效；其它hack可以隨時查閱網路，很容易找到

Ⅶ css修改png圖片顏色

CSS濾鏡（filter）屬提供的圖形特效，像模糊，銳化或元素變色。過濾器通常被用於調整圖片，背景和邊界的渲染。 MDN

CSS標准里包含了一些已實現預定義效果的函數。

filter: none
| blur()
| brightness()
| contrast()
| drop-shadow()
| grayscale()
| hue-rotate()
| invert()
| opacity()
| saturate()
| sepia()
| url();
具體請看原文
————————————————
版權聲明：本文為CSDN博主「nanhupatar」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/nanhupatar/article/details/82793637

Ⅷ css過濾器問題 急 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

你是利用濾鏡讓IE6支持PNG透明吧，呵呵，這個bug解決辦法很簡單：給a加上position:relative;不過這里版要提醒你，你權這里的image路徑是相對路徑，那麼值得注意的是，這個相對路徑是根據html相對的，而不是CSS，所以當你發布的時候會發現一堆問題，所以，這里建議還是放到外網，使用絕對路徑。哦，我看錯了，你是指背景拉伸么，那麼你這樣寫有考慮到兼容問題么？

Ⅸ css的hack

對IE6、IE7、FF兼容性的詳細CSS HACK介紹2007年12月05日 16:00以下為引用：
現在我大部分都是用!important來hack，對於ie6和firefox測試可以正常顯示，但是ie7對! important可以正確解釋，會導致頁面沒按要求顯示！搜索了一下，找到一個針對IE7不錯的hack方式就是使用「*+html」，現在用IE7瀏 覽一下，應該沒有問題了。

現在寫一個CSS可以這樣：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

那麼在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999，他們都互不幹擾。我真希望那個IE6快點退休......

css Hacks，css樣式表補丁.用於修正XHTML編碼設計的網頁模板布局,某些層的溢出問題,HACKS出處:www.webdevout.net，這個CSS補丁(hacks)很簡單，在樣式表中單獨為ie7設置某個元素，id或者class前面這樣寫:

*:first-child+html #ID{}

或者

*:first-child+html .class{}
別忘掉了前面的*,這個hacks使得DIV+CSS網頁模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的瀏覽器中都可以完美體現原始布局,而不會出現層溢出等問題.

IE7 修復了很多 bug，也增加了對一些選擇符的支持，所以現在諸如 *html {} 和 html>body {} 等針對 IE 隱藏或顯示的 hack 都會在 IE7 中失效。雖然 CSS Hack 不推薦使用，條件注釋才是萬無一失的過濾器，但是條件注釋只能出現在 HTML 中，CSS Hack 還是有用武之地的。Nanobot 發現了一些針對 IE7 的 CSS Hack，具體就是：

>body
html*
*+html

這 三種寫法，其中前兩種都是不合法的 CSS 寫法，在標准兼容瀏覽器中被被忽略，但是 IE7 卻不這么認為。對於 >body ，它會將缺失的選擇符用全局選擇符 * 代替，也就是將其處理成了 *>body，而且不光對於 > 選擇符，+,~ 選擇符中這個現象也存在。對於 html* ，由於 html 和 * 之間沒有空格，所以也是一種 CSS 語法錯誤，但 IE7 不會忽略，而是錯誤地認為這里有一個空格。對於第三種 *+html，IE7 認為 html 前面的 DTD 聲明也是一個元素，所以 html 會被選中，這三種方法中只有這一種方法是合法的 CSS 寫法，也就是說可以通過校驗器的驗證，因此也是作者推薦的 hack 用法。

最後作者給出了最佳方式：

IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.

The IE7 CSS Hack(!important在ie7.0的hack方法)

由 於ie對!important識別存在bug,而現在大部分網頁標准設計師又通過這個bug來兼容ie和ff,但是ie7.0把這個bug給修復了,所以 問題又出現了,怎麼兼容ie.7.0的同時又能兼容ie6.0和ff?正所謂"上有政策,下有對策",國外的網頁標准設計師通過使用css filter的辦法(並不是css hack)來兼容ie7.0,ie6.0和ff,以下為作者從國外網站的翻譯.

新建一個css樣式如下：
插入代碼：

#item {
width: 200px;
height: 200px;
background: red;
}

新建一個div,並使用前面定義的css的樣式：
插入代碼：

some text here

在body表現這里加入lang屬性,中文為zh：
插入代碼：

現在對div元素再定義一個樣式：
插入代碼：
[/code]
*:lang(en) #item{
background:green !important;
}
[/code]
這樣做是為了用!important覆蓋原來的css樣式,由於:lang選擇器ie7.0並不支持,所以對這句話不會有任何作用,於是也達到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式：
插入代碼：

#item:empty {
background: green !important
}

:empty選擇器為css3的規范,盡管safari並不支持此規范,但是還是會選擇此元素,不管是否此元素存在,現在綠色會現在在除ie各版本以外的瀏覽器上,並在以下瀏覽器和操作系統下通過測試：

ie7 beta 2 preview/win
ie5.01+/win
firefox 1.5/win
opera 8.5/win & linux
netscape 7.01, 8/win
mozilla 1.7.12/win & linux
safari 2/mac
firefox 1.0.4/linux
epiphany 1.4.8/linux
galeon 1.3.20/linux

Screenshot of the IE7 css hack in IE7

Screenshot of the IE7 css hack in Firefox 1.5

按照遠作者的說法其實這不能算是一種hack,應該屬於filter,不過這似乎並不是最重要的,因為通過這個辦法,我們又一次了解決IE6.0,IE7.0和其他瀏覽器之間的兼容性問題,而且使用:lang-filter這辦法,在今後的一段時間內都會有用.

文章來自：http://www.aixq.com/read.php?704

firefox,ie7,ie6兼容性問題，和css解決方案
註：IE都能識別*;標准瀏覽器(如Firefox,Opera,Netscape)不能識別*；IE6能識別*，但不能識別 !important,IE7能識別*，也能識別!important;FF不能識別*，但能識別!important;

寫兩句代碼來控制一個屬性，區別Firefox與IE6：
background:orange;*background:blue;

//這一句代碼寫出來時，你用firefox或其它非IE瀏覽時，會發現，寫了該代碼的區域背景是橙色的，如果用IE瀏覽，卻是藍色的，這是因為IE都能識別*;標准瀏覽器(如Firefox,Opera,Netscape)不能識別*；

寫兩句代碼來控制一個屬性，區別IE7與IE6：
background:green !important;background:blue;

//這一句代碼寫出來時，你用IE7瀏覽，會發現，寫了該代碼的區域背景是綠色的，如果用IE6瀏覽，卻是藍色的，這是因為IE7能識別! important*，一但識別了，就執行，忽略了後面的那一句，但IE6卻不能識別!important，所以前面部分跳過，直接執行了後半部份。

寫兩句代碼來控制一個屬性，區別Firefox與IE：
background:orange; *background:green;

//這一句代碼寫出來時，你用Firefox瀏覽，會發現背景是橙色的，而IE里卻是綠色的，很簡單，因為Firefox不能識別*，而IE6，IE7都可以識*

寫三句代碼來控制一個屬性，區別Firefox，IE7，IE6：
background:orange;*background:green !important;*background:blue;

//這一句會使在Firefox在，背景呈橙色，IE7中為綠色，IE6中為藍色，道理和前面一樣，Firefox不能識別*，所以後面兩句都不執行，直 接執行第一句，IE7當然也能執行第一行代碼，但是因為第二句，他也能識別，所以就執行了第二句代碼，把前面的效果給過濾了，而最後一句，IE7是不能識 別的。IE6不能識別!imprtant，本來運行了第一句代碼了，第二句不能識別，那就理所當然的執行了最後一句。

<style>body{color:00ff00;}</style>
<!--[if IE 6]>
<style>body{color:#ff6600;}</style>
<![endif]-->
<!--[if IE 7]>
<style>body{color:#ff0000;}</style>
<![endif]-->

Ⅹ css怎樣取消filter 過濾器 漸變

css怎樣取消filter 過濾器 漸變
兩種方法： 1、將你所有的JSP頁面單獨放在一個文件夾里(假如jspPage)，jspPage文件夾里可根據類別分若乾子文件夾，再把相對應的JSP放在子文件夾里； JS、CSS及圖片等分別放在外面的文件夾里(與文件夾jspPage並列) 再：/jspPage/*...