Web設計中，圖片倒影效果往往能給網頁增添一份小清新、時尚的感覺，而HTML中的CSS功能就可以輕松實現這一效果。

/*html代碼*/
/*css代碼*/
.reflection{
position:relative;
width:500px;
height:250px; /*圖片高度*/
margin:50px auto; /*居中對齊*/
overflow:hidden;
}
.reflection img{
position:absolute;
bottom:0;
z-index:-1; /*放在底層*/
transform: scaleY(-1); /*垂直鏡像翻轉*/
}
.reflection:before{
content:'';
width:100%;
height:50%;
position:absolute;
bottom:0;
left:0;
right:0;
background:linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*漸變背景*/
z-index:1; /*放在圖片上層*/
}

首先，在HTML中定義一個容器div，并在其中嵌套一個img標簽，用于顯示需要添加倒影效果的圖片；

其次，在CSS中定義容器div的樣式，包括容器div的寬度、高度、相對位置等等，以及為圖片添加絕對定位、翻轉等樣式，實現倒影效果；

最后，在容器div中添加一個before偽元素，用于實現倒影的漸變效果，從透明到不透明的效果突出倒影的感覺。