CSS3是現代Web開發中不可或缺的一部分，它可以讓我們實現各種炫酷的效果，其中之一就是圖片加濾鏡。下面我們就來看看怎樣用CSS3給圖片加上濾鏡效果。

/*給圖片加上灰色濾鏡*/
img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
/*給圖片加上模糊濾鏡*/
img{
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
}
/*給圖片加上反色濾鏡*/
img{
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
}

以上是給圖片加上一些常見的濾鏡效果的代碼，其中filter屬性和-webkit-filter和-moz-filter前綴用于兼容不同瀏覽器。通過這些代碼可以實現在Chrome、Firefox、Safari等瀏覽器上均可用的效果。

需要注意的是，因為濾鏡效果會占用一些計算資源，所以在使用的時候要謹慎使用。同時，不同的瀏覽器支持的濾鏡效果有所不同，有些效果可能只在一些較新的瀏覽器版本中支持。

總的來說，CSS3給圖片加上濾鏡效果是一個很有趣實用的技巧，可以讓頁面看起來更加美觀，給用戶帶來更好的視覺體驗，但是使用的時候要注意兼容性和性能問題。