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

Question

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

我的想法是会有一个 iMac PNG(为网站截图切出一个洞)，然后使用内容管理系统我会上传网站截图并将其放置在屏幕内和屏幕后面以显示....这一切都很好，但我希望屏幕和网站截图反射(reflect)在下面。我知道这只是微妙的，但如果可能的话，我愿意这样做。

这是我打算使用的代码结构，请随意在任何示例中使用它:)

演示: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 并且它反射(reflect)在一个图像中......节省请求和困惑代码。
• 这将由客户填充，因此他们所能做的就是上传网站的屏幕截图。

谢谢!

Answer 1

这是一个显示纯 CSS 实时反射的 fiddle (如果您更改源元素，反射也会改变):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();
});

如果您的图像是固定大小的，则不需要这样做。

这看起来像什么:

火狐 Chrome

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