使用CSS3濾鏡讓圖片反轉顏色

CSS提供的濾鏡也是一大亮點，我一直痴迷其中，有些濾鏡的效果很有用，可是有些的濾鏡效果可能只是為了玩玩兒，CSS常見的濾鏡有這些：grayscale, blur, sepia，所有常見的過濾器。但是如何使用和轉化圖片呢？今天我們主要是來講講如何使用CSS3濾鏡讓圖片反轉顏色。

CSS代碼

invert濾鏡就是為了設置元素的反色效果，他的值設置范圍為：0-100%，100%為完全反色，0為顯示正常的顏色。

.normal {
    filter: invert(0%);
}

.inverted {
    filter: invert(100%);
}

你可以反轉單個元素的顏色，或你也可以反轉document.documentelement整個網頁內容，得到反轉以后的效果。 將原來的CSS值，所以沒有辦法獲得真實的反演值給定的屬性的。

彩色反轉是一個 有用的輔助工具，但它是由用戶的操作系統或一個單獨的工具通常提供。我可以看到被幫助的 反演的晚上，緩解眼睛疲勞時，看着屏幕。 你能想出一個好用的彩色反轉？ 請分享！

本文系作者 問說網 授權問說網發表，並經問說網編輯，轉載請注明出處和 本文鏈接。

本站文章除注明轉載外，均為本站原創或翻譯，歡迎任何形式的轉載，但請務必注明出處，尊重他人勞動。
轉載請注明：文章轉載自： 問說網 » 使用CSS3濾鏡讓圖片反轉顏色
本文標題：使用CSS3濾鏡讓圖片反轉顏色
本文地址： https://www.uedsc.com/invert-colors-css.html