javascript - 响应式设计中的背景图像

Question

我有 4 张彼此相邻的手机图像，带有透明屏幕。当浏览器的屏幕尺寸改变时，手机会彼此靠得更近。

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

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

我还尝试过什么:

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

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

编辑:
* (1) 为了澄清，在这个 fiddle 中，窗口移动-div 的位置确实根据其位置显示了图像的正确部分。也许这是因为它是用绝对像素而不是百分比指定的？ http://jsfiddle.net/XjCCK/39/

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

Answer 1

您可以使用background-attachment:fixed;正确定位内部背景(在您的情况下是水滴)，然后使用上/左/右/下对其进行剪辑。

.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 支持之前创建)