html - 如何使图像停留在背景的特定部分

Question

我有一张背景图片，CSS 中的尺寸被覆盖，所以它会随着浏览器窗口的大小调整。但是当我放置图像时，如何定位它们以便它们根据背景停留在某个位置？我尝试使用 left:...px 和 top:...px 我知道为什么它不起作用，因为当我调整窗口大小时它会停留在远离左侧和顶部的那个位置，但解决方案是什么？我希望图像根据窗口/背景的大小按比例调整大小并停留在背景的某个位置

Answer 1

使用 % 的绝对定位

HTML:

<div id="foo"></div>

CSS:

#foo{
    position:absolute;
    top:10%;
    left:20%;
}

对于位置，您可以使用绝对位置、固定位置或相对位置，具体取决于哪种套件最适合。

固定:相对于浏览器窗口；

Relative:相对于自然位置

绝对:相对于第一个定位的祖先