如何使用 CSS 单元素创建镜像效果

Posted 2023-02-25

【中文标题】如何使用 CSS 单元素创建镜像效果

【英文标题】：How to create mirrored image effect with CSS single element

【发布时间】：2016-10-21 16:24:12

【问题描述】：

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

对我来说创建这种反射的最佳解决方案是仅使用 CSS 而不使用比单个元素更多的元素并且不使用图像 URL 多次（由于维护原因）。我只发现 solutions like this 带有“复杂”的 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>

【问题讨论】：

有点相似（有文字）-***.com/questions/32651639/…

感谢您的提示！

【参考方案1】：

您确实可以使用伪元素: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>

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

【参考方案2】：

只需添加

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>

【讨论】：

Andreas 的回答可能有更多的供应商支持。 mask-image 没有得到广泛的支持，但是当它支持时，你有 95% 在那里。

这不会沿水平轴添加镜像。注意水中的曲线如何走错路。您想使用 rotateX(180deg) 而不是 rotate(180deg)。

不错的收获。我什至没有注意到。

旋转180不等于镜像操作！这是一个双镜像操作（最终参见群论）