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

Image reflection effect using pure CSS

提问by md1hunox

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

我在<img>标签中有一个图像。我的目标是仅使用 CSS 创建该图像的反射。它还必须与所有浏览器兼容。我尝试了各种方法来做到这一点，其中之一是在这个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-reflectand -webkit-gradient.
I want it to work on Mozilla too.

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

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

我现在
所拥有的：正如在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)));

I tried the following for Mozilla:

我为 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-reflectis the container div for the <img>.

#moz-reflect的容器 div在哪里<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.

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

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.

如果没有办法仅使用 CSS 就可以使其在 Mozilla 中工作，那么我不介意走 JavaScript 之路。

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

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

回答by Mr. Alien

I've changed your code totally, I am using CSS3 gradients with transformproperty, this is Pure CSSwith maximum compatibility.

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

Here, the key thing I am using is rgba()along with the transformproperty applied to second imgwhich am targeting using nth-of-typepseudo.

在这里，我使用的关键是rgba()与transform应用到第二个的属性一起img使用nth-of-type伪目标。

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

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

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

演示（这里使用有点错误，rotate()因为它不会产生反射效果，实际上只会旋转图像，请参阅我的第二个演示）

Demo 2(Using scalefor mirroring images, can use rotateYas well, as pointed out in the comments..)

演示 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;
}

---

---

Demo 3(Only difference is, that am using height: 50%;for the :afterpseudo so we don't have to hard code it)

演示 3（唯一的区别是，它height: 50%;用于:after伪代码，因此我们不必对其进行硬编码）

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

---

---

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.

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

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

图像反射，black用作bodybackground. 上面代码片段中的唯一变化是应用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(For websites using darker backgrounds, black in this case)

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

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

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

回答by Josiah

You can also use a single image element along with ::beforeand ::after, however it's not very useful (yet), since you have to hard-code a background-image:url()for the ::beforepseudo-element. I'm posting this answer because someone else may want to do it this way, and hopefully one day we'll be able to use background-image: attr(src, url);syntax. (1) As of June 2014, no browsers support this.

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

A fiddle: http://jsfiddle.net/DeedH/5/

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

I'm assuming you have a black background.

我假设你有一个黑色的背景。

Structure:

结构：

1. img- main image (actually displayed as a background-image),
2. ::beforecontaining the reflection. Must be display:inline-blockin order to use the transform:scaleYto flip the image.
3. ::aftercontaining a gradient mask.

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

The html: (note that currently the srcis not used).

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

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

The CSS:

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:'';
}

Note that you must use content:'';on the imgitself, otherwise the pseudo-elements won't display.

请注意，您必须content:'';在其img自身上使用，否则将不会显示伪元素。

Also be aware that this is not really applicable to a class of images because you have to hard-code the image url. But this could be useful if you used it by id and used js to write the rules to a document level stylesheet. Otherwise, this is only helpful for single images.

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

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

(1). 使用 HTML data-attribute 设置 CSS background-image url