使用纯 CSS 的图像反射效果

Question

我在<img> 标签中有一张图片。我的目标是仅使用 CSS 创建该图像的反射。 它还必须与所有浏览器兼容。我尝试了各种方法来做到这一点，其中之一就是JS Fiddle

我想要什么：
反射上从上到下的淡入为零不透明度。现在它只适用于使用-webkit-box-reflect 和-webkit-gradient 组合的webkit 浏览器。
我希望它也能在 Mozilla 上运行。

我现在拥有的：
正如在JSfiddle 中看到的那样，我让它在 webkit 浏览器中使用：

-webkit-box-reflect: below 0px 
-webkit-gradient(linear, left top, left bottombottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));

我为 Mozilla 尝试了以下操作：

#moz-reflect:after {  
    content: "";  
    display: block;  
    background: -moz-element(#moz-reflect) no-repeat;  
    width: auto;  
    height: 200px;  
    margin-bottom: 100px;  
    -moz-transform: scaleY(-1);  
}

其中#moz-reflect 是<img> 的容器div。

我很感激只能用 CSS 解决问题的答案。有很多图像（图标）必须应用此效果。

如果无法仅使用 CSS 使其在 Mozilla 中工作，那么我不介意走 JavaScript 之路。

更新 它必须适用于自定义背景，可能是图像或黑色或任何其他颜色。

Answer 1

我已经完全改变了你的代码，我正在使用带有transform 属性的CSS3 渐变，这是具有最大兼容性的纯CSS。

在这里，我使用的关键是rgba() 以及应用于第二个img 的transform 属性，该属性使用nth-of-type 伪定位。

另外，请确保您在父元素上调用了position: relative;，因为我使用:after 伪用于底部 的渐变叠加，所以我使用position: absolute; bottom 设置为 0

Demo （使用rotate() 犯了一点错误，因为它不会产生反射效果，只会旋转图像，请参考我的第二个演示）

Demo 2 （使用scale进行镜像，也可以使用rotateY，正如cmets中指出的那样..）

#moz-reflect:after {
    content:"";
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 49%, rgba(255, 255, 255, 1) 100%);
    /*I've removed proprietary gradient codes from here, you can get it in the demo*/
}

#moz-reflect img:nth-of-type(2) {
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1); 
}

#moz-reflect {
    position: relative;
}

---

Demo 3 （唯一的区别是，height: 50%; 使用 :after 伪，所以我们不必硬编码）

上述代码块中唯一要修改的代码是height属性，该属性设置为50%

#moz-reflect:after {
    content:"";
    width: 100%;
    height: 50%; /* Changed the unit over here */
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 49%, rgba(255, 255, 255, 1) 100%);
}

---

注意：为了创建最适合的渐变，假设黑色背景的网站需要黑色不透明渐变，而不是您可以使用 Color Zilla 制作自己的渐变。

图像反射，使用black 作为body background。上述代码 sn-p 的唯一变化是将background: #000; 应用于body，并且我已经相应地调整了渐变。

background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.67) 49%, rgba(0, 0, 0, 1) 100%);

Demo （对于使用较深背景的网站，在这种情况下为黑色）

注意：没有在黑色演示中添加渐变的专有属性

Answer 2

您还可以将单个图像元素与::before 和::after 一起使用，但是它不是很有用（目前），因为您必须为::before 伪元素硬编码background-image:url()。我发布这个答案是因为其他人可能想这样做，希望有一天我们能够使用background-image: attr(src, url); 语法。 (1) 截至 2014 年 6 月，没有浏览器支持此功能。

小提琴：http://jsfiddle.net/DeedH/5/

我假设你的背景是黑色的。

结构：

1. img - 主图（实际显示为背景图），
2. ::before 包含反射。必须是display:inline-block 才能使用transform:scaleY 翻转图像。
3. ::after 包含渐变蒙版。

html:（注意目前src没有被使用）。

<img class="reflect" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx" />

CSS：

.reflect {
    position:relative;
    display:block;
    height:300px;
    width:300px;
    background-image:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx');
    background-repeat:no-repeat;
    background-size:contain;
    content:'';
}
.reflect::before {
    position:relative;
    top:20%;
    height:100%;
    width:100%;
    display: inline-block;
    -moz-transform: scaleY(-.7);
    -o-transform: scaleY(-.7);
    -webkit-transform: scaleY(-.7);
    transform:scaleY(-.7);
    opacity:0.2;
    background-image:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx');
    background-repeat:no-repeat;
    background-size:contain;
    content:'';
}
.reflect::after {
    position:relative;
    top:-40%;
    height:70%;
    width:100%;
    background-image:-webkit-radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1));
    background-image:-moz-radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1));
    background-image:-o-radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1));
    background-image:radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1));
    background-repeat:no-repeat;
    background-size:contain;
    content:'';
}

注意，img 本身必须使用content:'';，否则伪元素不会显示。

另外请注意，这并不真正适用于一类图像，因为您必须对图像 url 进行硬编码。但是，如果您通过 id 使用它并使用 js 将规则写入文档级样式表，这可能会很有用。否则，这仅对单个图像有用。

(1)。 Using HTML data-attribute to set CSS background-image url