CSS3 顏色濾鏡是 CSS3 的一項強大功能,它可以改變元素的顏色和透明度。該功能使用濾鏡函數實現。
下面是 CSS3 顏色濾鏡的語法:
filter: 要應用的濾鏡函數;
例如:
filter: grayscale(100%);
上面的代碼將把元素的顏色變成灰色。
以下是常用的濾鏡函數列表:
- grayscale() - 將元素轉換為灰度圖像
- sepia() - 將元素轉換為棕褐色圖像
- saturate() - 飽和度增加
- hue-rotate() - 調整色相
- invert() - 反轉元素中的顏色
- opacity() - 設置元素的透明度
- brightness() - 調整元素的亮度
- contrast() - 調整元素的對比度
使用這些濾鏡函數,可以創造出各種各樣的效果。
以下是一個應用 CSS3 顏色濾鏡的例子:
CSS3 顏色濾鏡 CSS3 顏色濾鏡
上面的代碼將把圖片變成灰色。
嘗試使用不同的濾鏡函數,創造出自己的獨特效果吧!