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

CSS代碼

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

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

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

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

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

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

總結(jié)

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

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