CSS是前端開發中非常重要的一部分，它可以控制頁面的樣式來實現各種效果。在網頁設計中，常常需要鼠標放上圖片變暗的效果，接下來我就來介紹一下如何實現這個效果。

img:hover{
filter: brightness(70%);
}

在上面的代碼中，使用了:hover偽類選擇器，表示鼠標放在img元素上時觸發這個樣式。另外使用了filter屬性，其中brightness函數可以控制圖片的亮度，0%表示完全黑暗，100%表示原色，這里我們設為70%。這樣，當鼠標放在圖片上時，就可以實現變暗的效果。

需要注意的是，該效果只對IE10+等瀏覽器有效。對于一些老版本的瀏覽器，可能不支持濾鏡屬性，所以建議在使用這種效果時，要進行兼容性處理。

除了brightness函數之外，還可以使用其他濾鏡函數來實現不同的效果，比如grayscale()函數可以將圖片灰度化，sepia()函數可以讓圖片變為棕色調，hue-rotate()函數可以使圖片按色相輪廓進行旋轉等等。

總之，在網頁設計中，鼠標放上圖片變暗是一種非常常見的效果，它可以增強用戶對圖片的視覺體驗。通過上述的代碼實現這一效果非常簡單，希望大家可以借鑒這個方法，在自己的項目中使用。