响应式设计中的背景图像

Question

我有 4 张彼此相邻的手机图片，带有透明屏幕。当浏览器的屏幕尺寸发生变化时，手机会彼此靠近。

应该有一个通过手机屏幕可见的背景图像，但我不能为容器使用背景图像，然后让每个手机屏幕透明，因为这样一部手机会在其下方显示另一部手机，如图所示这里：

http://jsbin.com/ozoyoc/1/

我还尝试了什么：

1. 将容器背景图片放在每个phone-div中，不起作用，似乎与background-position的百分比对齐不剪辑调整浏览器窗口大小时图像的正确部分 (*)
2. 在每个电话里放一个div-li，代表屏幕。无法将图像偏移到每个手机的正确位置，因为 % 将相对于 父元素大小，即 li 而不是 容器

这可以在 CSS 中实现还是我必须查看 Javascript 来设置正确的图像偏移量？

编辑：
* (1) 澄清一下，在这个小提琴中，window moving-div 的位置确实根据其位置显示了图像的正确部分。也许这是因为它是在 absolute px 而不是 percentages 中指定的？ http://jsfiddle.net/XjCCK/39/

.moving {
 left: left,
 top: top,
 backgroundPositionX: -left,
 backgroundPositionY: -top
}

Answer 1

您可以使用background-attachment: fixed; 正确定位内部背景（在您的情况下为水滴），然后使用 top/left/right/bottom 对其进行剪辑。

.iphone {
  /* needs to have a position value other than 'static' for clipping below */
  position: absolute;

  /* untouched rules */
  width: 177.6px;
  height: 411px;
  top: 15.2%;
  left: 18.488%;
  z-index: 2;

  /* moved your iphone image to the outer container */
  background-image: url(http://s18.postimg.org/fzjmm7kih/iphone5.png);
  background-size: 100%;
}

.iphone > div {
  position: absolute;

  /* clip */
  top: 13%;
  right: 10%;
  bottom: 26%;
  left: 10%;

  /* i put your droplet image on the inner div */
  background-image: url(http://s16.postimg.org/vqs385e6t/background_leaf.jpg);

  /* positioning magic */
  background-attachment: fixed;
}

在http://jsbin.com/ozoyoc/2/查看演示

来源：http://meyerweb.com/eric/css/edge/complexspiral/demo.html（在 alpha 透明颜色或 png 支持之前创建）