css实现背景图片实现倒影

可以使用 CSS3 中的伸缩盒子（flexbox）来实现背景图片的倒影效果。具体实现方法是利用伸缩盒子的反转（`transform: scaleX(-1)`）和透明度（`opacity`）属性来实现。以下是一个示例代码：

<div class="container">
  <div class="background"></div>
  <div class="reflection"></div>
</div>

/* CSS 代码 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  position: relative;
}

.background {
  width: 300px;
  height: 300px;
  background-image: url("background-image.jpg");
  background-size: cover;
  margin-bottom: -150px;
  position: relative;
  z-index: 1;
}

.reflection {
  width: 300px;
  height: 150px;
  background-image: url("background-image.jpg");
  background-size: cover;
  margin-top: -150px;
  position: relative;
  z-index: 0;
  opacity: 0.5;
  transform: scaleX(-1);
}

在这个示例中，我们使用了一个容器 `div`（`.container`）来包含背景图片和倒影。容器使用了伸缩盒子布局，并且设定了垂直居中的样式。在容器内，我们分别使用了两个 `div` 元素分别表示背景图片（`.background`）和倒影（`.reflection`）。这两个元素都使用了相同的背景图片，并且设定了合适的尺寸和位置。倒影使用了反转和透明度属性来实现倒影效果。最终的效果是一个非常简单但是很有效的背景图片倒影效果。