0

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

我有两个 div，第一个包含 iPhone 框架的背景图像，第二个包含锁定屏幕的图像。我正在尝试将 screenbackground div 对齐到 iphonebackground div 的顶部，以使其看起来都是一张图像。这样，当帧图像是静态的时，我可以更改 iPhone 上显示的内容。

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

<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;
}
4

1 回答 1

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/

于 2013-04-07T13:17:20.107 回答