Question

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

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

img2将是表单的背景，因此我会在其上添加一个表单。

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

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

当我使用标签时，通过在img1上放置100％宽度，由于图像比率，自动定义了高度。但现在有了背景图片，我无法告诉div“嘿，请把你的身高调整到你的背景图像上”。

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

非常感谢

Answer 1

我不明白这一点：

关于img2，因为它有一个绝对的位置，因为它有一个大小在px中，我甚至不能在左边放一个％，因为它会移动取决于屏幕尺寸。

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

假设您的img2是200px宽：

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

如果img2的大小为％，则无效。

Answer 2

您可以使用CSS3 multiple background images

执行此操作

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

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);

DEMO

Answer 3

尝试将基本图片absolute和图片放在relative的顶部，同时使用z-index覆盖，如果我已正确理解您的问题，应该工作

CSS - 将图像置于另一个图像的中心

3 个答案: