Question

基本上我尝试使用CSS创建图像的反射，如下所示（和/或jQuery，但不会真正影响性能）。这也需要响应。

我们的想法是会有一个iMac PNG（网站屏幕截图有一个漏洞），然后使用内容管理系统我会上传网站截图，它会被放置在屏幕后面以显示....这一切都很好，但我希望屏幕和网站截图反映在下面。我知道这只是微妙的，但如果可能的话，我想这样做。

example of reflection effect

这是我计划使用的代码结构，可以在任何示例中使用它：）

DEMO：http://codepen.io/anon/pen/gKnry

<div class="screen_contain">
    <img src="imac-image.png" class="imac">
    <img src="website_image.png" class="website">
</div>

.screen_contain {
  display:inline-block;
  position: relative;
  width:33%;
}

.imac {
  width: 100%;
  position: relative;
  z-index: 10;
}

.website {
  position: absolute;
  left: 5.0%;
  top: 5%;
  width: 90%;
  z-index: 5;
}

注意：

我显然能够合并iMac图像，使其具有主iMac和它在一个图像中的反射...节省请求和杂乱的代码。
这将由客户填充，因此他们所能做的只是上传网站的屏幕截图。

谢谢！

Answer 1

使用CSS变换翻转图像。然后，使用CSS掩码创建图像的alpha蒙版（http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-alpha-mask）。

不幸的是，似乎没有广泛支持CSS alpha掩码http://caniuse.com/#search=mask。如果您有纯色背景，另一种方法是将iMac图像放在元素中（可能作为背景），并将PNG-24渐变图像放在顶部，淡化为背景颜色。

Answer 2

这是一个小提示，显示 纯CSS 实时反映（如果更改源元素，反射也会改变）：http://jsfiddle.net/scvprc2r/

这仅适用于Webkit和Gecko浏览器（仅在Chrome和Firefox中测试过）。如果您想获得更好的浏览器支持，请使用SVG或JS解决方案。

修改后的结构：

<div class="screen_contain">
    <div class="computer" id="one">
        <img src="http://ferncroft.co.uk/files/2014/08/ethernal-demo-imac.png" class="imac" />
        <img src="http://danzambonini.com/wp-content/uploads/2010/07/stack_overflow_initial.jpg" class="website" id="web1" />
    </div>
    <div class="reflection"></div>
</div>

我在图像周围添加了一个额外的包装器div，为站点图像和包装器div添加了唯一的ID。我还添加了另一个div来保存Firefox中的反射和两种浏览器中的渐变淡化效果。

CSS：

.computer {
    -webkit-box-reflect: below 0px linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

使用-webkit-box-reflect创建元素下方元素的反射。添加渐变以产生更平滑的效果。

.reflection {
    transform: scaleY(-1);
}

我们的基本反射风格。我们翻转它以使mozilla element()背景处于正确的方向

#one + .reflection {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 32%, rgba(255, 255, 255, 0) 100%) 100% 100%,
                    -moz-element(#web1) no-repeat 50% -5%,
                    -moz-element(#one) no-repeat 100% 100%;
}

这就是Firefox中反射的方式。这利用了element()函数，它创建了元素的实时图像。元素背景设置为div上的第二个和第三个背景。

然后对每个额外的重复div重复此代码。

在Firefox中，反射背景的大小和位置取决于它所放置的div的高度。这里有一些jQuery可以动态地将反射的大小更改为原始元素的大小：

function resizeReflection() {
    $('.reflection').each(function () {
        $(this).height($(this).prev().height());
    });
}

resizeReflection();

$(window).resize(function () {
    resizeReflection();
});

如果您的图片尺寸固定，则不需要这样做。

这是什么样的：

火狐 Firefox 铬 Chrome

如果你想要一个SVG解决方案而不是一个CSS解决方案，请看一下（更简单，并且有更好的浏览器支持）：http://jsfiddle.net/JeremiePat/bGD3J/

Answer 3

css reflection

<强> jsFiddle Example

CSS

.reflection {
    transform: rotate(180deg); 
    width: 100%;
}

.gradient {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999;
    background: -webkit-gradient(linear, left bottom, left top,
       color-stop(0%,rgba(255,255,255,.5)), 
       color-stop(60%,rgba(255,255,255,1)));
}

避免jquery：只需复制HTML以避免jquery

<div class="screen_contain">
    <img src="http://ferncroft.co.uk/files/2014/08/ethernal-demo-imac.png" class="imac" />
    <img src="http://danzambonini.com/wp-content/uploads/2010/07/stack_overflow_initial.jpg" class="website" />
    <div class="screen_contain reflection">
        <img src="http://ferncroft.co.uk/files/2014/08/ethernal-demo-imac.png" class="imac" />
        <img src="http://danzambonini.com/wp-content/uploads/2010/07/stack_overflow_initial.jpg" class="website" />
        <div class="gradient"></div>
    </div>
</div>

使用Jquery jsFiddle Example

  var screen_captain = $('.screen_contain');

  $.each(screen_captain, function(){
     $(this).append($(this).clone().addClass('reflection').append('<div class="gradient"></div>'));
  })

Answer 4

这是重复的问题，已在StackOverflow主题中得到解答：

<强> CSS property box-reflect compatibility?

不仅可以使用webkit（最新的chrome或safari），还可以使用最新的firefox。

以下是示例：http://codepen.io/jonathan/pen/pgioE

啧啧，感谢大卫：

http://satreth.blogspot.com/2012/05/css3-reflection.html

HTML：

<div id="someid">
   <img src="image url" />
<div/>

CSS（webkit）：

#someid {
        /* need some space for the reflection */
        margin-bottom: 120px;
        /* the gradient makes the reflection fade out */
        -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
}

CSS（Firefox - Gecko）：

#someid {
        position: relative;
        /* need some space for the reflection */
        margin-bottom: 120px;
}

#someid:before {
        content:""; /* needed or nothing will be shown */
        background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, -moz-element(#someid) 0px -127px no-repeat;
        -moz-transform: scaleY(-1); /* flip the image vertically */
        position:relative;
        height:140px;
        width: 360px; /* should be > image width + margin + shadow */
        top: 247px;
        left:0px;
 }

Firefox使用-moz-element进行反射（https://developer.mozilla.org/en-US/docs/CSS/element），而webkit使用专有供应商前缀进行反射。

其他例子：

http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/

干杯！

是否可以使用CSS镜像内容？

4 个答案: