3

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

带镜子的图像

我创建这种反射的最佳解决方案是仅使用 CSS 而不使用比单个元素更多的元素并且不使用图像 URL 多次（由于维护原因）。我只用“复杂”的 HTML 标记找到了这样的解决方案。

这是我的代码：

div {
  position: relative;
  background: url(https://i.stack.imgur.com/P56gr.jpg);
  width: 300px;
  height: 200px;
}
div:after {
  content: "";
  position: absolute;
  background: url(https://i.stack.imgur.com/P56gr.jpg);
  display: block;
  width: 300px;
  height: 200px;
  bottom: -210px;
}
<div></div>

4

2 回答 2

9

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

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

div {
  position: relative;
  background: url(https://i.stack.imgur.com/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>

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

于 2016-10-21T16:25:53.937 回答
1

只需添加

transform: rotate(180deg);
-webkit-mask-image:-webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,.7)), to(rgba(0,0,0,1)));

显然，在 css 中做这样的事情时，没有什么是 100% 跨浏览器的

div {
  position: relative;
  background: url(https://i.stack.imgur.com/P56gr.jpg);
  width: 300px;
  height: 200px;
}
div:after {
  content: "";
  position: absolute;
  background: url(https://i.stack.imgur.com/P56gr.jpg);
  display: block;
  width: 300px;
  height: 200px;
  bottom: -210px;
  transform: rotate(180deg);
  -webkit-mask-image:-webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5)));
}
<div></div>

于 2016-10-21T16:30:39.750 回答