1

我必须制作一个宽度为 100% 的图像的页面，该图像将位于页面的顶部（我将其称为“img1”）。

在 img1 上，我必须放置另一个图像，我将其称为“img2”，它将具有固定的像素大小并居中。

img2 将是一个表格的背景，所以我会在上面放一个表格。

我已经阅读了一些关于如何使用相对和绝对嵌套 div 将图像放在另一个图像顶部的帖子，但是我不能使用自动边距；在 img2 上，因为它有一个绝对位置，并且因为它的大小以 px 为单位，所以我什至不能以 % 为单位，因为它会根据屏幕大小移动。

我尝试了另一个选项，它使用两个嵌套的 div 和具有指定背景大小的背景图像（img1 的宽度为 100%，img2 的宽度为 500px），并将 img2 与 background-position 居中：它可以工作，但是然后是 img1 的 div （当然是空的，因为我使用的是背景图像），没有高度。

当我使用标签时，通过将 100% 的宽度放在 img1 上，高度是自动定义的，因为图像比例。但是现在有了背景图像，我无法告诉 div “嘿，请让你的身高适合你的背景图像”。

你有什么建议？我希望我已经很好地解释了我的问题。

非常感谢你

4

3 回答 3

4

我不明白这一点：

在 img2 上，因为它有一个绝对位置，并且因为它的大小以 px为单位，所以我什至不能在 % 中放置一个左侧，因为它会根据屏幕大小移动。

您说 img2 具有固定大小，在我看来，这是绝对位置和负边距居中的完美案例。

假设您的 img2 是 200px 宽：

.img2 {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -100px /* negative half the width */
}

如果 img2 有 % 大小，它将无法工作。

于 2013-02-13T12:59:10.413 回答
1

您可以使用 CSS3多个背景图像来做到这一点

这允许您指定多个背景，如下所示：

background-image: url(http://i153.photobucket.com/albums/s223/chibizim/110-baby-monkey.png), url(http://upload.wikimedia.org/wikipedia/commons/e/e6/Standing-stone-state-forest-tn1.jpg);

演示

于 2013-02-13T13:00:31.817 回答
0

尝试让您的基本图像absolute和应该放在顶部的图片relative同时z-index用于叠加，然后如果我正确理解了您的问题，它应该可以工作

于 2013-02-13T12:58:31.627 回答