CSS3可以用來將彩色的圖片轉換為黑白圖片。我們在網頁設計中經常需要使用黑白圖片來強調一些重要信息或者增加網頁的美感。
img { filter: grayscale(100%); }
使用上述代碼,我們可以將網頁中的所有圖片轉換為黑白圖片。其中grayscale屬性表示將圖片轉成灰度圖像,100%表示轉換成黑白圖像。
如果想要具體控制某個圖片的黑白程度,我們可以這樣寫:
img { filter: grayscale(70%); }
這樣可以將圖片轉換為70%的黑白圖片。也可以使用其他的CSS3濾鏡屬性來對圖片進行處理,例如:
img { filter: contrast(150%) brightness(150%); }
這個樣式將圖片的對比度和亮度均提高了150%。
在實際應用中,我們可以使用CSS3來創建出更加豐富多彩的網頁。通過巧妙運用CSS3濾鏡,我們可以得到很多想象不到的效果。