CSS3 filter（濾鏡）屬性詳解_第1頁
全文預覽已結束

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、css3 filter（濾鏡）屬性詳解css3的濾鏡filter屬性，可以對網頁中的舉行類似photoshop處理的效果，h5時代的來臨，我們可以通過css對圖像舉行處理。掃瞄器支持狀況：惟獨ie掃瞄器不支持filter（濾鏡）屬性，為了兼容低版本的safari和google掃瞄器，需要加上前綴-webkit-filter（濾鏡）屬性現在規范中支持的效果有：grayscale 灰度（值為0-1之間的小數）filter:grayscale(1); -webkit-filter:grayscale(1);0表示灰度為0%，顯示原圖，1 表示灰度為100%灰色。sepia 褐色（值為0-1之間的小數

2、）filter:sepia(1); -webkit-filter:sepia(1);0表示褐色度為0%，顯示原圖，1 表示褐色度為100%顯示褐色。saturate 飽和度（值為num）filter:saturate(1.8); -webkit-filter:saturate(1.8);0表示飽和為0，顯示黑白色，0.5表示飽和度為原圖的一半，1表示飽和度等于原圖，數值大于1表示飽和度加強。hue-rotate 色相旋轉（值為angle）角度degfilter:hue-rotate(60deg); -webkit-filter:hue-rotate(60deg);表示色相旋轉的詳細角度。inv

3、ert 反色（值為0-1之間的小數）filter:invert(1); -webkit-filter:invert(1);0表示不反色顯示原圖，1表示100%徹低反色。opacity 透亮度（值為0-1之間的小數）filter:opacity(0.5); -webkit-filter:opacity(0.5);0表示徹低透亮，0.5表示半透亮，1表示100%徹低不透亮。brightness 亮度（值為num）filter:brightness(2); -webkit-filter:brightness(2);0表示亮度為0，顯示黑色，0.5表示亮度為原圖的一半，1表示原圖亮度，數值大于1表示亮度加強。contrast 對照度（值為num）filter:contrast(1.8); -webkit-filter:contrast(1.8);0表示對照度為0，為純色，0.5表示對照度為原圖的一半，1為原圖對照度，數值大于1，值越大，對照度越強。blur 含糊（值為length）filter:blur(5px); -webkit-filter:blur(5px);表示虛化程度像素值。drop-shadow 陰影filter:drop-shadow(0 0 10px 000); -webkit-filter:drop-shadow(0 0 10px 000);和css3

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論