Question

我的模板基于Twitter Bootstrap，因此具有响应性。

我有两个div，第一个包含iPhone框架的背景图像，第二个包含锁定屏幕的图像。我试图在iphonebackground div顶部对齐screenbackground div，以便它看起来是一个图像。这样我可以在帧图像静止时更改iPhone上显示的内容。

我的问题是我无法找到一种方法来将屏幕背景div与iphonebackground div对齐，这样即使iphonebackground div的大小发生变化（屏幕调整大小时），屏幕背景也会正确缩放并保持对齐。

<div class="iphonebackground">
  <div class="screenbackground"></div>
</div>

.iphonebackground {
    background-image:url("../img/iphone-frame.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height:576px;
}

.screenbackground {
    background-image:url("../img/iphone-background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    height:50%;
    width:66%;
    padding-right: 23%;
}

编辑：我已将代码更改为如下所示，它更接近但仍然不太正确：

.iphonebackground {
    background-image:url("../img/iphone-frame.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height:511px;
}

.screenbackground {
    background-image:url("../img/iphone-background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size:60% 50%;
    height:511px;
}

Answer 1

为什么不创建与第一个完全相同的尺寸但具有透明边距的第二个图像？有两个相同的图像，它们会相应调整大小。

<div class="iphonebackground">
  <div class="screenbackground"></div>
</div>

.iphonebackground, .screenbackground {
    background-image:url("http://chpwn.com/apps/iphone-frame.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    height:300px;
}

.screenbackground {
    background-image:url("https://dl.dropbox.com/u/290586/iphone-bg.png");
}

http://jsfiddle.net/notme/zYV8x/

将背景图像相对于其他背景图像对齐

1 个答案: