使用纯CSS实现图像反射效果

Question

我有一个在<img>标签中的图片，我的目标是仅使用CSS创建该图片的反射。它还必须与所有浏览器兼容。我尝试过各种方法来实现它，其中之一在这个JS Fiddle中。 我想要的：
在反射上从上到下渐变为零不透明度。目前仅在WebKit浏览器中使用-webkit-box-reflect和-webkit-gradient的组合才能工作。
我希望它也能在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 解决这个问题。有很多图片（图标）需要应用这种效果。

如果在 Mozilla 中无法仅使用 CSS 实现，则可以尝试 JavaScript 方法。

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

- md1hunox

---

你打算如何使用纯CSS在IE中实现这个？ - stackErr

我目前不关心IE，当然如果能兼容IE也是一个优点；我的主要关注点是Mozilla。 - md1hunox

Answer 1

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

关键是我在第二个img上应用了rgba()以及transform属性，我通过nth-of-type伪类来定位它。

此外，请确保您在父元素上调用了position：relative;，因为我正在使用:after伪类来产生从底部的渐变覆盖层，所以我对它使用了position：absolute；并将bottom设置为0

Demo （在这里出现了一些小问题，我使用了rotate（）但它不会产生反射效果，实际上只会旋转图像，请参考我的第二个演示）

Demo 2 （使用scale镜像图像，也可以使用rotateY，如评论中所指出的那样。）

#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;
}

---

演示 3 (唯一的区别是，我在伪元素:after中使用了height: 50%;，这样我们就不必硬编码了)

在以上代码块中要修改的唯一代码是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。上述代码片段中唯一的更改是将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 (针对使用深色背景的网站，这里是黑色)

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

- Mr. Alien

---

为了获得所需的效果，我建议使用scaleY而不是rotate。请查看http://jsfiddle.net/FWB7K/7/。使用旋转似乎效果不佳。 - DaniP

感谢您的回答。虽然您所做的在白色背景下可以正常工作，但是在自定义背景下可能不太好看。我刚刚更新了我的问题。我之前忘记包含那一部分了。 - md1hunox

@vineetrok，好的，这就是我全部的内容了。如果你后来添加了条件，我也无能为力:)不客气。如果这个解决方案不够，请等待其他解决方案。 - Mr. Alien

@Mr.Alien 没错，是我不好。你的答案现在已经足够了。如果我的更新条件得到满足，那就更好了。所以，如果还有其他答案，我会等待它们的到来。 - md1hunox

@Charles380如果你有其他解决方案，请发表 - 在答案中编辑内容（除了语法，损坏的链接等）是不好的做法。 - rlemon

Answer 2

你也可以使用单个图像元素和伪元素::before和::after，但它现在还不是很有用，因为你必须硬编码一个 background-image:url()来为::before 伪元素设置背景图片。我发布这个答案是因为其他人可能想要这么做，并且希望有一天我们能够使用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). 使用HTML数据属性设置CSS背景图像URL

- Josiah