html - html - 如何使图像停留在背景的某些部分

Question

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

Answer 1

使用带有 %'s 的绝对定位

HTML：

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

CSS：

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

对于位置，您可以根据最适合的套件使用绝对、固定或相对。

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

相对：相对于自然位置

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

Answer 2

如果您希望调整背景图像的大小但将特定元素保持在相同的垂直位置，一种方法是在 background-position 属性中使用 calc() 函数，并将 background-size 设置为 100%。

例如：

background-image: url('your image');
background-position: top calc(200px - 20vw) right;
background-attachment: fixed;
background-size: 100%;
background-repeat: no-repeat;

随着图像的扩展，图像内部要保持在相同垂直位置的元素自然会变大并向下移动。计算中的负视口值补偿了这种垂直向下移动，而第一个值设置了元素的垂直位置。调整 calc() 函数中的值，直到您对结果满意为止。

Answer 3

我不太了解您的问题（也许您应该尝试放置一些代码或创建一个 jsfiddle）。

但是我认为你应该看看 css3 background-size属性。

我想这个来自 W3C 的样本就是你需要的。