如何在 JavaScript/CSS 中简单地创建图像反射效果？答案

【问题标题】：How to simply create an image reflection effect in JavaScript/CSS?如何在 JavaScript/CSS 中简单地创建图像反射效果？
【发布时间】：2019-07-01 13:09:35
【问题描述】：

我花了一些时间研究如何最好地创建动态图像反射效果。

我发现的选项是：

非标准浏览器标签如-webkit-reflect,
从
放弃动态图像反射的想法并依赖 GIMP/Photoshop。
此外，大多数现有解决方案在非纯背景（即纹理）上都失败了。

上述的缺点就在眼前。不幸的是，我没有一个网络博客来发布我的想法，但我认为值得分享（请参阅下面的自我回答）。

【问题讨论】：

虽然您可以在适当的情况下在此处发布此类内容，但请以正确的格式发布 - stackoverflow.com/help/self-answer 编辑以上内容，使其成为正确的问题想做这样的事情可能会问，然后为那个问题提供一个实际的答案 ;-)

标签： css image reflection effect mirror

【解决方案1】：

在 HTML 中添加图片：

<img class="reflect" src="some/image.png" />

添加以下 CSS 规则：

img.reflect {
  width: calc(100% - 20px); /* not sure how else to allow for margin */
  margin-left: 10px;
}

img.reflection {
  position: absolute;
  opacity: 0.4;
  margin-top: 4px;
  width: calc(100% - 20px);
  -webkit-mask-image: -webkit-linear-gradient(transparent 75%, black 100%);
  mask-image: linear-gradient(transparent 75%, black 100%);
  -webkit-transform: translateX(calc(-100% - 10px)) translateY(100%) scaleY(-1) ;
  transform: translateX(calc(-100% - 10px)) translateY(100%) scaleY(-1);
}

如果您不想依赖任何 JavaScript，您现在可以简单地通过在 (1) 中的图像标签之后插入反射标签来添加反射：

<img class="reflection" src="some/image.png" />

否则

例如，使用以下函数扩展 JQuery：

$.fn.reflect = function() {
    var reflection = this.clone();
    this.after(reflection);
    reflection.addClass("reflection");
};

然后反映图像：

$(".reflect").reflect();

【讨论】：

【解决方案2】：

这是一个不需要 jQuery 或 JS 的纯 CSS 解决方案：

.reflect {
  display:inline-block;
  vertical-align:top;
  width:150px;
  height:300px;
  background:
    linear-gradient(#000,#000) center/100% 1px no-repeat, /*a separation*/
    var(--img) top/100% 50% no-repeat;
  position:relative;
}
.reflect::before {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  top:0;
  background:inherit;
  transform:scale(1,-1);
  -webkit-mask-image: -webkit-linear-gradient(transparent 25%, #ccc 50%);
  mask-image: linear-gradient(transparent 25%, #ccc 50%)
}
.right {
  width:300px;
  height:150px;
  background-position:center,left;
  background-size:1px 100%,50% 100%;
}
.right:before {
  transform:scale(-1,1);
  -webkit-mask-image: -webkit-linear-gradient(left,transparent 25%, #ccc 50%);
  mask-image: linear-gradient(to left,transparent 25%, #ccc 50%)
}

<div class="reflect" style="--img:url(https://picsum.photos/200/200?image=0)"></div>

<div class="reflect right" style="--img:url(https://picsum.photos/200/200?image=1069)"></div>

【讨论】：

@Daniel 不需要添加两次 ;) 我只是做了一次