在響應式設計中的背景圖像

Question

我有4個手機圖像彼此相鄰，透明屏幕。當瀏覽器的屏幕尺寸發生變化時，手機會相互靠近。

應該有一個可以通過手機屏幕看到的背景圖片，但是我不能使用背景圖片作爲容器，然後讓每個電話屏幕都是透明的，因爲然後一個手機會顯示另一個電話屏幕，這裏展示：

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

還有什麼我已經試過：

1. 把容器背景圖像中的每個電話DIV，沒有工作，似乎日在與背景位置對準調整瀏覽器窗口（*）
2. 將一個DIV在每個電話 - 利，其表示的當在百分比不剪輯圖像的正確部分屏幕。圖像無法抵消對每個電話的正確位置，因爲％是相對於父元素大小，這是李而不是容器

可這中實現CSS或我將不得不看Javascript來設置正確的圖像偏移？

編輯：
*（1）爲澄清，在該小提琴的窗口移動的-div它只表示基於其位置的圖像的正確部分的位置。也許這是因爲它在中指定的絕對px而不是百分比？ 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（由α-透明色或PNG支持天之前創建的）