使用纯CSS的图像反射效果

Question

我有一个<img>标签图像.我的目标是仅使用CSS创建该图像的反射.它还必须与所有浏览器兼容.我尝试了各种方法,其中一个是在这个JS小提琴

我想要的是:
在反射中从上到下淡化到零的不透明度.现在它仅适用于使用-webkit-box-reflect和的组合的webkit浏览器-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容器div 在哪里<img>？

我很感激能够解决CSS问题的答案.有很多图像(图标)必须应用此效果.

如果没有办法可以使用CSS在Mozilla中工作,那么我不介意沿着JavaScript之路走下去.

更新 它必须处理自定义背景,可能是图像或黑色或任何其他颜色.

Answer 1

我完全改变了你的代码,我使用CSS3渐变transform属性,这是Pure CSS,具有最大的兼容性.

在这里,我使用的关键是rgba()将transform属性应用于第二个img使用nth-of-type伪目标的属性.

此外,请确保您有人称position: relative;父元素,因为我使用:after的伪从渐变叠加底部,所以我使用position: absolute;的是同bottom一套以0

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

演示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 (唯一不同的是,这是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.只有上面的代码片段中的更改才适用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%);

演示 (适用于使用深色背景的网站,在这种情况下为黑色)

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