在CSS中將圖片變成灰白色是一種很常見的效果,如果您想了解如何做到這一點,請跟隨下面的步驟。
img { filter: grayscale(100%); -webkit-filter: grayscale(100%); }
請確保上面的代碼是在您的CSS文件中的圖片選擇器下。這個CSS過濾器可以將一個圖片變成它的灰度版本。值為100%時,這個過濾器將完全把圖像轉(zhuǎn)換為灰度,如果你把它設為0%的話,圖片將被完全保留。
這個過濾器,還可以在圖片上方應用額外的樣式,例如透明度或顏色混合模式。
img { filter: grayscale(100%) opacity(0.5); -webkit-filter: grayscale(100%) opacity(0.5); mix-blend-mode: overlay; }
上面的代碼將圖片變成灰度并將第一重疊層的不透明度設置為50%。它還使用顏色混合模式將圖像疊加到另一張圖片上。
通過CSS將圖片變成灰色,是一種簡單而優(yōu)美的方法來改變圖像的外觀。
上一篇html5的css選擇器
下一篇css將字往下移