html - 如何用CSS单元素制作镜像效果

Question

我有一个带背景图片的 HTML 元素，想在底部创建一个镜像效果，就好像图片是这样反射的:

对我来说，创建此反射的最佳解决方案是仅使用 CSS，而不使用比这一个元素更多的元素，并且不多次使用图像 URL(由于维护原因)。我只找到solutions like this带有“复杂”的 HTML 标记。

这是我的代码:

div {
  position: relative;
  background: url(/image/P56gr.jpg);
  width: 300px;
  height: 200px;
}
div:after {
  content: "";
  position: absolute;
  background: url(/image/P56gr.jpg);
  display: block;
  width: 300px;
  height: 200px;
  bottom: -210px;
}

<div></div>

Answer 1

您确实可以使用伪元素 :after 和 :before 首先使用 transform: scaleY(-1); 镜像图像> 然后用从半透明白色 rgba(255, 255, 255, 0.5) 到不透明白色 #fff 的线性渐变覆盖镜像图像。

为了不被强制标记图像 URL 两次，只需使用 background: inherit;。

div {
  position: relative;
  background: url(/image/P56gr.jpg) bottom;
  width: 300px;
  height: 200px;
}
div:after,
div:before {
  content: "";
  position: absolute;
  display: block;
  width: inherit;
  height: 50%;
  bottom: -52%;
}
div:after {
  background: inherit;
  transform: scaleY(-1);
}
div:before {
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff);
}

<div></div>

注意:您必须使用供应商前缀才能支持不同的浏览器。