關于
filter—— 你以為它隻能做單純的“濾鏡”嗎？
不！常用的
blur
處理（圖檔）模糊程度、
opacity
處理（圖檔）透明度、
grayscale
處理（圖檔）灰階 屬性隻是其世界組成中的一部分。
css-filter的實際用處可真不少。
其實，最【受人追捧】的
夜間模式用filter也可以簡單實作：
首先，我們拿到一個input标簽 —— 它一般放在整個頁面（body）的最上面 —— 這樣就可以通過CSS的一些“特性”來控制“全局”：
哦，你當然可以将它換成“按鈕”的樣式 —— 這用單純的CSS也很容易實作 -> 細說UI元件庫中的“開關”
當你點選這個“開關”時，就到了filter大展身手的時候了：
filter: invert(xxx); —— CSS中的“反相”：其作用元素擁有這個值時會發生色調“翻轉”，比如：白-黑；當作用元素是img圖檔時，會使圖檔色調也反轉
xxx是定義轉換的比例值。100%的價值是完全反轉。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。也可用0和1以及之間的小數表示。若值未設定，值預設是0。
這時候，就會對整個頁面有效果。若頁面中有圖檔元素，正如上面所說：invert會對圖檔造成“反轉”效果（這才是它的本意！）。
這時我們可以在圖檔上用到filter的另一個屬性值：inherit：
inherit：從父元素繼承該屬性（☞ filter任一屬性）
當然，你還可以更簡單的完成：
hue-rotate(deg)：給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值為0deg，則圖像無變化。若值未設定，預設值是0deg。該值雖然沒有最大值，超過360deg的值相當于又繞一圈。
filter還可以用來“在非透明區域加陰影效果”：
filter: drop-shadow;
它能達到和box-shadow一樣的效果（還支援svg）—— 雖然box-shadow已經很完美了。
你甚至還可以隻用上面提到的
hue-rotate
屬性值完成曾經非常麻煩的特效： “字型動态顔色流轉效果” —— 結合animation：
好吧，其實filter主要還是用來做「各種過濾（color、image…）」的，咱們别“舍近求遠”。比如：遮罩層就經常用到這個 —— 跟這個用途類似的還有一個是“mask”（全名：
mask-image，CSS3屬性）。也是很好用的。
但是他們都有一種情況不能“相容”：
background-image僅背景圖檔透明度設定！
事情是這樣的：某元素，我們希望它的背景圖檔（background-image）是半透明的，但是，元素裡面的其他内容，例如文字，圖示之類的還是照常顯示。
如果是純色背景或者是CSS漸變背景，很好處理，使用rgba或者hsla顔色色值即可。
但是，如果是url()背景圖像，似乎就無能為力了 —— 無論是filter濾鏡 、mask遮罩 還是opacity透明度 設定都無法 “準确作用于” 背景圖像，所有前面提到的這些方法都會影響文字等的正常顯示。
此前，我們有一種解決的方案是
CSS僞元素：
這種方式無疑是巧妙的，但并不友好 —— 元素定位、拉伸展示、背景圖檔大小以及z-index都可能讓新手“望而卻步”。
有一種新的解決方案是 ——
cross-fade()（background-image屬性值之一），它支援兩個圖檔url參數，一個透明度參數。願意是“用來處理兩張圖檔疊加問題”，但似乎這方面沒有太多使用，反而被發現可以友善地用在“對一張圖檔設定透明度（且僅作用圖檔，不對文字産生影響）”的問題上：
透明度參數僅對第二個url的圖檔起作用，可任取一張“透明圖檔”作為第一個參數，第二個url上就放上我們想要處理的圖檔（真正圖檔），如此，即可：
（當然，如果頁面中需要這樣做的地方多的話，你也可以把“透明度圖檔”設定為CSS3變量，然後不斷的用
var()
引用）
———————————————— 版權聲明：本文為CSDN部落客「雲小夢」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。 原文連結：關于CSS3一些新屬性的一些思考：夜間模式、區域陰影、透明度_flying meng的菜鳥居-CSDN部落格_css夜間模式blog.csdn.net