Jquery 如何在HTML页面中保持图像相对于背景图像的固定位置？

我有一个HTML页面，我把背景图像放在主体css中

body {
    /*cursor: URL("target.png"),pointer;*/
    background-color:#202020;
    background-image: url('../Images/BGimage.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

现在，当我在html页面中放置一个新图像时

<img src="target.png" style="position:absolute;margin-top:280px;margin-left:700px;z-index:1" />

---

当我全屏或最小化窗口时，图像的位置会改变。背景图像是固定的，但新图像会移动。如何解决这个问题

你可以试试position:fixedcss样式。这将修复您的图片，无论您最大化或最小化屏幕

style{
    position:fixed;
    margin-top:280px;
    margin-left:700px;
}

---

希望能有所帮助。

你可以试试position:fixedcss样式。这将修复您的图片，无论您最大化或最小化屏幕

style{
    position:fixed;
    margin-top:280px;
    margin-left:700px;
}

<img src="target.png" style="position:absolute;top:280px;left:700px;z-index:1" />

希望能有所帮助。

<img src="target.png" style="position:absolute;top:280px;left:700px;z-index:1" />

使用“上”和“左”可以设置图像的水平和垂直位置，这样图像就不会移动，因为它位于该位置（以像素为单位）。

使用“上”和“左”可以设置图像的水平和垂直位置，这样图像就不会移动，因为它位于该位置（以像素为单位）。

如果希望较小的图像将非重复背景图像覆盖在相对于背景图像的永久固定位置，然后，您也可以在图像编辑应用程序中打开背景图像，将较小的图像复制并粘贴到画布中，按您想要的方式定位，然后将其保存为新的图像文件。然后可以使用该新图像文件作为背景图像

当然，如果您需要在页面的生命周期内对较小的图像应用动态更改，例如转换，或者对其CSS进行动态更改，那么这将不起作用。但如果不是这样，我认为这是最好的解决办法

---

我更仔细地研究了这个问题。因为您需要对较小的图像进行动态更改，所以将其嵌入背景图像将不起作用。相反，需要计算并指定较小图像在包含元素中的确切位置，以便它在您想要的确切位置覆盖背景图像

要完成此任务，必须确定背景图像相对于包含元素的最终绝对位置

---

CSS属性值序列 重要的是要了解CSS属性值经历了一个复杂的计算过程，该过程可能包含浏览器默认值、CSS源声明、特殊性、继承性、相互依赖的属性交互、布局相关的相对值解析，以及在某些情况下的舍入/近似

我们可以通过列出在此计算序列中可以发挥作用的不同阶段的值来总结此过程：

用作根元素的浏览器默认设置。还用作非继承属性的非根元素的浏览器默认值（继承属性可以从根或其父级继承初始值，如果继承属性的沿袭或自样式中未被覆盖的话）

在文档源（文件链接、样式标记和内联样式属性）中明确指定的值。这将考虑CSS的级联规则，为元素/伪元素选择最具体的规则

源值（如果给定），否则为继承值（对于继承属性）或初始值（对于非继承属性）。请注意，源值本身可以设置为纯文字

inherit

或

initial

指定值的派生，解析

继承

和

初始

以获得更具体的值，并应用额外的转换，例如span

位置：绝对

更改为

显示：块

。预布局

执行所有计算后的最终值。后布局。将自动和百分比解析为绝对像素值

应用所有近似值后使用的值。例如，用户代理可能只能渲染具有整数像素值的边界，并且可能被迫近似计算出的边界宽度

---

令人困惑的是，该函数不返回计算值，而是返回称为解析值的内容：

由

getComputedStyle（）

返回。（1） 对于

行高

，它始终是使用的值。（2） 否则，对于具有

显示的元素/伪元素（a）：无

，或（b）该属性从未应用，或（c）对于过度约束的

底部

，

左侧

，

右侧

，或

顶部

，它始终是计算值（因为在大多数情况下无法确定它们的布局）。（3） 否则，对于

底部

，

左侧

，

右侧

，

顶部

，

宽度

，

高度

，

填充

，以及

边距

属性，它始终是使用的值。（4） 否则，它始终是计算值

---

问题 问题是我们需要背景图像的位置。背景图像本身不是一个元素，因此我们无法从它的CSS使用值中获得它的位置，因为它没有自己的CSS值。此外，由于背景图像放置的复杂性，其准确位置可能以微妙的方式与包含元素的位置不同，具体取决于（1）原始背景图像大小的值，（2）以及（3）包含元素大小，其本身可能取决于用户浏览器窗口的大小，它可以动态变化

当然，上述三个CSS属性的值存在排列，这将固定背景图像相对于其包含元素的位置，并允许我们静态确定将较小图像放置在相对于背景图像的所需位置的绝对位置，不管任何其他细节。但是对于您的情况，因为您有

背景大小：contain

和

背景