css怎么实现图片倒影 |css z-index 永远顶层

/* 首先，大家需要给图片的容器元素设置一些样式 */
.image-container {
position: relative;
width: 300px;
height: 300px;
}
/* 接着，大家创建一个伪元素，作为倒影的容器 */
.image-container::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%; /* 倒影的高度为原图的一半 */
background: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); /* 这里使用了渐变背景实现透明度 */
transform: scaleY(-1); /* 将倒影沿Y轴翻转 */
}
/* 最后，大家需要将图片设置为绝对定位，使其覆盖在倒影容器之上 */
.image-container img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

使用以上CSS代码，大家可以实现一个基本的图片倒影效果。需要注意的是，这种实现方法只适用于固定高度的图片容器，如果容器高度会随窗口大小而改变，大家就需要使用JavaScript来处理了。另外，这种方法在IE浏览器上可能不兼容，需要做兼容性处理。