CSS圖片顯示變暗可以通過CSS的filter屬性實現。filter屬性是CSS3的一個屬性,可以對元素進行濾鏡處理。下面是一個通過filter屬性實現圖片變暗的代碼示例:
img { filter: brightness(0.5); /*亮度為0.5*/ }
上面代碼中的brightness(0.5)表示將圖片亮度設置為0.5,即變暗了一倍。
除了brightness函數,CSS還有其他的一些濾鏡函數可以實現圖片的各種效果,如模糊、灰度、對比度等。下面是一些常用的濾鏡函數:
img { filter: blur(5px); /*模糊處理,5px為模糊半徑*/ filter: grayscale(100%); /*灰度處理,100%為完全灰度*/ filter: contrast(150%); /*對比度,150%為增加50%的對比度*/ filter: sepia(100%); /*色調,100%為完全的褐色調*/ }
以上是一些常用的CSS濾鏡函數,通過這些函數的組合使用可以實現各種復雜的效果,如圖片的模糊加灰度處理。