使用纯CSS的图像反射效果 [英] Image reflection effect using pure CSS
问题描述
我在< img>
标签中有一个图片。我的目标是使用CSS创建一个图像的反射。
它还必须与所有浏览器兼容。我尝试了各种方法来做到这一点,其中之一是在此 JS小提琴
我想要的:
在反射上从上到下淡化为零不透明度。现在它只能在webkit浏览器中使用 -webkit-box-reflect
和 -webkit-gradient
的组合。
我也想在Mozilla上工作。
我现在有什么:
从 JSfiddle 中可以看出,我在webkit浏览器中使用了:
-webkit-box-reflect:below 0px
-webkit-gradient(linear,left top,left bottombottom,from(transparent)色彩停止(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 ,具有最大的兼容性。
这里,我使用的关键是 此外,确保您在父元素上调用了 演示2 (使用 rgba()
以及 c>使用
nth-of-type
伪目标的第二个 img
/ p>
position:relative;
,因为我使用:after
伪用于来自底部的渐变覆盖,所以我使用 position:absolute;
底部
设置为 0
演示 (有点 c>> c>,因为它不会产生反射效果,只会旋转图像,请参考我的第二个演示) em>
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 。
使用黑色
作为
背景
。只有上面代码段中的更改是应用背景:#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屋!