CSS 是網頁設計中一個關鍵的技術，可以使網頁呈現出豐富的樣式和效果。其中，實現圖片的倒影是一個常用的技巧，下面介紹如何使用 CSS 實現。

.image {
position: relative;
width: 300px;
height: 200px;
}
.image img {
width: 100%;
height: 100%;
}
.image:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 50%;
background-image: linear-gradient(to bottom, transparent, #000);
opacity: 0.5;
transform: scaleY(-1);
}

首先，需要給圖片所在的容器設置position: relative;，然后設置圖片的寬度和高度為 100%。接著，在容器的偽元素:after中設置倒影的樣式。使用content: "";設置偽元素的內容為空，并設置其寬度為 100%、高度為圖片高度的一半。

倒影的效果使用 CSS 漸變實現，使用background-image: linear-gradient(to bottom, transparent, #000);設置漸變從透明到黑色。然后將倒影進行翻轉使用transform: scaleY(-1);，這會使倒影按照 Y 軸翻轉。

最后，為倒影設置透明度opacity: 0.5;，能夠更好地適配不同的圖片背景，使得倒影效果更加真實。