CSS中有一種屬性可以使圖片褪色,即opacity屬性。這個屬性可以控制元素的不透明度,范圍從0(完全透明)到1(完全不透明)。
img { opacity: 0.5; }
在上面的代碼中,我們把圖片的不透明度設置為0.5,這意味著它的顏色會被減弱一半。
不僅如此,CSS還提供了一個過度效果,可以使顏色漸變。我們可以使用transition屬性來控制這個效果。
img { opacity: 0.5; transition: opacity 1s; } img:hover { opacity: 1; }
以上代碼的意思是:當鼠標移到圖片上時,圖片的不透明度從0.5過渡到1,過渡時間為1秒。
這樣的效果可以為網站增色許多。用CSS使圖片褪色,能夠為網站增加氛圍,使其看起來更加現代和高質量。