css濾鏡實現網頁變灰效果
學習如何使用一行代碼實現網頁變灰效果。
一、效果
效果圖
谷歌瀏覽器
二、css分析
通過filter濾鏡實現網頁變灰，爲什麼filter需要有這麼多行？看下面分析：
filter濾鏡
filter: grayscale(100%);
將圖像轉換爲灰度圖像。值定義轉換的比例。值爲100%則完全轉爲灰度圖像，值爲0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；
提高兼容性使用瀏覽器私有屬性設置filter
瀏覽私有屬性
-ms //-ms代表ie內核識別碼
-moz //-moz代表火狐內核識別碼
-webkit //-webkit代表蘋果的Safari瀏覽器及谷歌內核識別碼
-o //-o代表歐朋【opera】內核識別碼
IE中filter屬性
filter:progid:DXImageTransform.Microsoft.BasicImage(Grayscale='x', Xray='x', Mirror='x', Invert='x', Opcity='x', Rotation='x')
GrayScale ，設置或調整對象的灰度值。
XRay ，設置或調整對象的X射線，布爾值，0正常顯示，1代表X射線，有點像我們去醫院拍X光一樣的效果。
Mirror ，設置或調整對象鏡像。0正常顯示，1內容對象將翻過來。
Invert ，設置或調整對象的反相。
Opacity ，設置或調整對象的不透明度。
Rotation ，設置或調整對象旋轉，0正常顯示，1代表旋轉90°，2代表旋轉180°，3代表旋轉270°