我在<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之路前进。
更新 它必须处理自定义背景，可能是图像或黑色或任何其他颜色。
答案 0 :(得分：11)
我完全改变了你的代码，我使用的是带有transform属性的CSS3渐变，这是纯CSS ，具有最大的兼容性。
此处，我使用的关键是rgba()以及应用于第二个transform的{{1}}属性，该属性使用img伪进行定位。
此外，请确保您已在父元素上调用nth-of-type，因为我使用position: relative;伪来处理来自底部的渐变叠加层，因此我正在使用{{ 1}}，:after设置为position: absolute;
Demo （通过使用bottom在这里犯了一些错误，因为它不会产生反射效果，只会旋转图像，请参阅我的第二个演示）
Demo 2 （使用0镜像图像，也可以使用rotate()，如评论中所指出的那样。）
scale Demo 3 （唯一不同的是，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;
}
，因此我们无需对其进行硬编码。
只有在上面的代码块中修改的代码才是设置为height: 50%;的{{1}}属性
:after注意：为了创建最适合的渐变，比如黑色背景的网站需要黑色不透明渐变，而不是使用Color Zilla制作自己的渐变色。
使用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%);
}
进行图片反映。只有上述代码段中的更改才是将black应用于body并且我已相应地调整了渐变。
backgroundDemo （对于使用深色背景的网站，在这种情况下为黑色）
注意：未在黑色演示中添加渐变的专有属性
答案 1 :(得分：0)
您还可以将单个图像元素与::before和::after一起使用，但它还不是很有用，因为您必须对{{1}进行硬编码} background-image:url()伪元素。我发布此答案是因为其他人可能希望以这种方式执行此操作，并希望有一天我们能够使用::before语法。 （1）截至2014年6月，没有浏览器支持此功能。
小提琴：http://jsfiddle.net/DeedH/5/
我假设你有黑色背景。
结构：
background-image: attr(src, url); - 主图像（实际显示为背景图像），img包含反射。必须为::before才能使用display:inline-block翻转图片。transform:scaleY包含渐变蒙版。 html :(请注意，目前未使用::after）。
srcCSS：
<img class="reflect" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx" />
请注意，您必须在.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:'';
}
上使用content:'';，否则伪元素将无法显示。
另请注意，这并不适用于某类图像，因为您必须对图像网址进行硬编码。但是，如果您通过id使用它并使用js将规则写入文档级样式表，这可能很有用。否则，这仅对单张图像有用。
（1）。 Using HTML data-attribute to set CSS background-image url