在網頁設計中，圖片是一個非常重要的組成部分，而蒙照效果是讓圖片更具美感的一種方法。今天我們來學習如何使用 CSS 給圖片設置蒙照效果。

img {
position: relative;
border-radius: 5px;
}
img:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 5px;
}

上面的代碼中，我們首先為圖片設置了一個圓角邊框，然后使用了 CSS 偽元素 :after 來添加一個半透明的蒙照層，使圖片看起來更柔和。在 :after 中，我們設置了content: ""來讓偽元素顯示出來，將其position屬性設置為absolute，讓其可以疊加在圖片之上，然后將其background-color設置為一個半透明黑色，使用border-radius屬性使其與圖片的圓角邊框保持一致。

如果你想要讓圖片的蒙照效果更加明顯，可以調整背景色的透明度，比如將rgba(0, 0, 0, 0.3)中的最后一個參數從 0.3 調整到 0.5。

我們也可以為:after偽元素設置其他樣式，比如opacity屬性來控制其透明度，或者添加text-align: center屬性來居中蒙照層的文本。

通過使用 CSS 給圖片添加蒙照效果，我們可以大大提升網頁的美觀度和整體質感。希望本文對你有所幫助！