使用纯CSS的图像反射效果 [英] Image reflection effect using pure CSS

问题描述

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

我想要的：

在反射上从上到下淡化为零不透明度。现在它只能在webkit浏览器中使用 -webkit-box-reflect 和 -webkit-gradient 的组合。

b从 JSfiddle 中可以看出，我在webkit浏览器中使用了：

  -webkit-box-reflect：below 0px 
 -webkit-gradient（linear，left top，left bottombottom，从（透明），色彩停止（70％，透明）到（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上使用

更新
它必须在自定义背景上工作，

解决方案

我已经改变了你的代码，我使用CSS3渐变与 transform 属性，这是 Pure CSS ，具有最大的兼容性。

这里，我使用的关键是 rgba（）以及 c>使用 nth-of-type 伪目标的第二个属性应用于第二个 img / p>



此外，确保你在父元素上调用了 position：relative; ，因为我使用：after 伪用于来自底部的渐变覆盖，所以我使用 position：absolute; 底部设置为 0





演示 （有点 rotate（），因为它不会产生反射效果，只会旋转图像，请参考我的第二个演示 em>

演示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 ％）; 
 / *我从这里移除了专有渐变代码，你可以在演示中得到它/ / b $ b} 
 
＃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 （唯一的区别是，使用高度：50％; 代表：之后 pseudo，因此我们不必硬编码）

只有在上面的代码块中修改的代码是 height 属性，设置为 50％ code>

 ＃moz-reflect：after {
 content：; 
 width：100％; 
 height：50％; / *改变单位在这里* / 
 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 。

图片反射，使用黑色作为 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％）; 
  

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

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

I have an image in <img> tag. My aim is to create a reflection of that image using only CSS. It also has to be compatible with all browsers. I tried various ways to do it one of them is in this JS Fiddle

What I want:
The Fade to Zero opacity from top to bottom on the reflection. Right now it works only in webkit browsers using combination of -webkit-box-reflect and -webkit-gradient.
I want it to work on Mozilla too.

What I have right now:
As it can be seen in the JSfiddle I got it working in the webkit browsers using:

-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)));

I tried the following for 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);  
}

where #moz-reflect is the container div for the <img>.

I'd appreciate answers which can solve the problem with CSS only. There are a lot of images (Icons) to which this effect has to be applied.

If there is no way it can be made to work in Mozilla using just CSS then I wouldn't mind going down the JavaScript road.

Update It has to work on custom background which may be an image or black or any other color.

解决方案

I've changed your code totally, I am using CSS3 gradients with transform property, this is Pure CSS with maximum compatibility.

Here, the key thing I am using is rgba() along with the transform property applied to second img which am targeting using nth-of-type pseudo.

Also, make sure that you have called position: relative; on the parent element because I am using :after pseudo for the gradient overlay from the bottom, so am using position: absolute; for that with the bottom set to 0

Demo (Had made a bit mistake here by using rotate() as it won't give reflection effect, will just rotate the image infact, please refer to my second demonstration)

Demo 2 (Using scale for mirroring images, can use rotateY as well, as pointed out in the comments..)

#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 (Only difference is, that am using height: 50%; for the :after pseudo so we don't have to hard code it)

Only code to modify in the above block of code is the height property which am setting to 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%);
}

---

Note: Inorder to create the gradients best suited, say black opaque gradients will be required for websites with black background, than you can make your own using Color Zilla.

Image reflection, using black as the body background. Only changes in the above snippet of code is that am applying background: #000; to body and I've tweaked the gradient accordingly.

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 (For websites using darker backgrounds, black in this case)

Note: Didn't added proprietary properties for gradient in the black demo

这篇关于使用纯CSS的图像反射效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！