CSS圖片加黑白濾鏡是一種常見的設計技巧,它可以將圖片變成黑白色調,使其更加簡潔、優雅、古樸。通過CSS的filter屬性,我們可以輕松地實現圖片黑白化效果。
img { filter: grayscale(100%); }
上面的CSS代碼中,我們使用了grayscale函數,將圖片的飽和度完全降為0,使其變為黑白色調。這樣,我們就可以將網頁中的圖片簡單地轉換為黑白模式。
除了grayscale函數外,CSS的filter屬性還有其他一些常見的函數,比如blur函數可以實現模糊效果,brightness函數可以調整圖片亮度,contrast函數可以調整圖片對比度,saturate函數可以調整圖片飽和度等。
img { filter: blur(5px); }
上面的代碼中,我們將圖片模糊化,其中5px是設置模糊半徑的值。如果你想要調整圖片亮度,你可以使用brightness函數,如下:
img { filter: brightness(50%); }
在這個例子中,我們將圖片的亮度調整為50%,使其變暗一些。同樣,如果你想調整對比度,使用contrast函數即可,如下:
img { filter: contrast(150%); }
在這個例子中,我們將圖片對比度調整為150%,既增強了亮度差異,也減弱了顏色飽和度。
通過上面的介紹,你現在可以嘗試使用CSS的filter屬性來實現圖片黑白化效果,同時也可以嘗試使用其他函數來調整圖片的各種特性,為你的網頁添加更多獨特風格的圖像效果。