图片的倒影效果

要实现图片的倒影效果，可以使用CSS中的 transform 和 gradient 属性。

首先，在 HTML 中添加一个包含图片的容器，例如：

<div class="image-container">
  <img src="your-image-url" alt="your-image">
</div>

然后，在 CSS 中设置容器的样式，包括宽度、高度、相对定位和背景颜色：

.image-container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #f2f2f2;
}

接着，使用伪元素 `::before` 创建一个半透明的黑色遮罩层，并通过 transform 属性将其翻转：

.image-container::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  transform: scaleY(-1);
  transform-origin: bottom;
}

这里使用了渐变色来实现遮罩层的透明度渐变，从上到下逐渐变为全透明。同时，通过 transform: scaleY(-1) 和 transform-origin: bottom 来将遮罩层垂直翻转，并以底部为轴心进行翻转。

最后，将图片相对于容器进行绝对定位，并设置 z-index 属性使其在遮罩层之上：

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

完成以上步骤后，就可以实现图片的倒影效果了。完整代码如下：

<div class="image-container">
  <img src="your-image-url" alt="your-image">
</div>

.image-container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #f2f2f2;
}

.image-container::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  transform: scaleY(-1);
  transform-origin: bottom;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}