在响应式设计中的背景图像

我有4个手机图像彼此相邻，透明屏幕。当浏览器的屏幕尺寸发生变化时，手机会相互靠近。在响应式设计中的背景图像

应该有一个可以通过手机屏幕看到的背景图片，但是我不能使用背景图片作为容器，然后让每个电话屏幕都是透明的，因为然后一个手机会显示另一个电话屏幕，这里展示：

还有什么我已经试过：

把容器背景图像中的每个电话DIV，没有工作，似乎日在与背景位置对准调整浏览器窗口（*）

将一个DIV在每个电话 - 利，其表示的当在百分比不剪辑图像的正确部分屏幕。图像无法抵消对每个电话的正确位置，因为％是相对于父元素大小，这是李而不是容器

可这中实现CSS或我将不得不看Javascript来设置正确的图像偏移？

编辑：
*（1）为澄清，在该小提琴的窗口移动的-div它只表示基于其位置的图像的正确部分的位置。也许这是因为它在中指定的绝对px而不是百分比？ http://jsfiddle.net/XjCCK/39/

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

来源

2013-04-29 andy

岂不是一个想法，相同的图像添加为背景每个手机'div'？ – Steeven 2013-04-29 13:04:17

@Steeven这就是我在（1）中试过的，但是图像在调整大小时没有更新。手机应根据手机的位置显示图像的正确部分。 – andy 2013-04-29 13:07:59

好的，清除它：你不想通过屏幕显示背景部分，即手机背后。但是，如果两部手机重叠，您*不希望看到手机背后的框架。我觉得这很不直观，尽管你用这种方式可以看到“通过”后面的电话。或者，如果我误解了它，请纠正我。 – Steeven 2013-04-29 13:10:49

您可以使用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（由α-透明色或PNG支持天之前创建的）

来源

2013-04-29 13:30:43 xec

谢谢！下一步是集中外部容器，并以某种方式获得正确的偏移量，并使用它来添加背景位置样式。关于这个的提示？ – andy 2013-04-29 13:48:38

@andy我不完全确定你的意思。你能否更新演示，以便我可以看到你的尝试失败的方式/位置？ – xec 2013-04-29 13:59:58

@andy只要你在容器的背景和iphone的背景上都具有相同的'background-position'，那么固定的附件应该照顾其余的http://jsbin.com/ozoyoc/4 – xec 2013-04-30 07:02:59

在响应式设计中的背景图像

回答

相关问题