在網頁設計中，圖片效果的展示是極為重要的。CSS3提供了一系列的圖片效果，其中包括了圖片變亮變暗效果。通過改變圖片的亮度，我們可以營造出一種神秘和溫暖的氛圍。

img:hover{
 filter: brightness(1.2);
}

上述代碼是CSS3實現圖片變亮的操作。當鼠標懸停在圖片上時，通過filter屬性的brightness函數可以增加圖片的亮度。其中，數值可以任意調節，數值越大則圖片越亮。

img:hover{
 filter: brightness(0.6);
}

如需實現圖片變暗的效果，則可以將brightness函數的參數設為小于1的值，數值越小圖片則越顯暗淡。

img:hover{
 filter: grayscale(100%);
}

除了brightness之外，CSS3還提供了一種叫做grayscale（灰度）的濾鏡。通過將數值設為100%，可以使得圖片變成黑白灰度的效果，可以營造出很棒的復古和沉穩的氣氛。

總之，這些CSS3濾鏡可以為圖片增添更多的效果，讓你的網頁更加出彩。希望這篇文章能夠幫助到大家。