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

CSS代碼

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

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

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

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

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

本文系作者 問說網(wǎng) 授權(quán)問說網(wǎng)發(fā)表，并經(jīng)問說網(wǎng)編輯，轉(zhuǎn)載請注明出處和 本文鏈接。
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯，歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處，尊重他人勞動。
轉(zhuǎn)載請注明：文章轉(zhuǎn)載自：問說網(wǎng) » 使用CSS3濾鏡讓圖片反轉(zhuǎn)顏色
本文標(biāo)題：使用CSS3濾鏡讓圖片反轉(zhuǎn)顏色
本文地址：https://www.uedsc.com/invert-colors-css.html

總結(jié)

以上是生活随笔為你收集整理的使用CSS3滤镜让图片反转颜色的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。