【发布时间】：2014-09-13 03:55:53
【问题描述】：
基本上，我正在尝试使用 CSS 来创建图像的反射，如下所示（和/或 jQuery，但不会真正影响性能）。这也需要响应式地工作。
我的想法是会有一个 iMac PNG（为网站截图切出一个洞），然后使用内容管理系统上传网站截图，并将其放置在屏幕内部和后面以显示....这一切都很好，但我希望屏幕和网站截图反映在下面。我知道这只是微妙的，但如果可能的话，我想这样做。
这是我打算使用的代码结构，请随意在任何示例中使用它:)
演示：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 并且它反映在一个图像中...节省请求和混乱的代码。
- 这将由客户填充，因此他们所能做的就是上传网站的屏幕截图。
谢谢！
【问题讨论】：
-
css-tricks.com/snippets/css/flip-an-image 不过，您需要两张图片。 css 不能“克隆”一个 dom 元素。那不是它的工作。这只是样式规则。如果您想要原始版本和翻转版本，则必须将图像嵌入两次。
-
嗯，它只是 WebKit，但有这个：CSS Reflections。诚然，自从我上次查看以来，这可能已从 WebKit 中删除，或者成为跨浏览器。
-
@DavidThomas：我不认为它已从 WebKit 中删除，而是 I don’t think it’s gone cross-browser either。
-
@Paul：我怀疑当前的“扁平化”设计是对早期智能手机时代流行的闪亮/拟物设计的回应；既然如此（恕我直言，等等），我想有光泽的 UI 将会回归（尽管与上一代有所不同）以响应扁平化设计。