CSS是網頁設計中非常重要的一個語言，它可以實現許多美妙的效果，比如圖標變暗。下面我們就來了解一下CSS如何實現這個效果。

.icon {
filter: brightness(70%);
}
.icon:hover {
filter: brightness(100%);
}

在上面的代碼中我們給圖標元素加上了filter屬性，brightness函數可以改變元素的亮度。設定為70%的亮度就可以實現圖標變暗的效果。

同時，我們也使用了:hover偽類，這個偽類會在鼠標懸停在該元素上時生效。我們將亮度設定為100%，這樣就能讓鼠標懸停在圖標上時恢復原來的顏色了。

以上就是CSS實現圖標變暗的方法啦，希望大家學會了可以在網頁設計中更好地應用它。加油！