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

如果您希望调整背景图像的大小，但将特定元素保持在相同的垂直位置，一种方法是使用背景位置属性内的 calc() 函数，并将背景大小设置为 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 的这个示例就是您所需要的。

Answer 4

我遇到了这个问题，当我向代码人员询问如何解决这个问题时，他们就是不明白。我不知道为什么？这看起来很基本。也许这太基本了，他们没有/无法思考？最后有人看懂了吗？有人解决这个问题了吗？ 如果有一天有解决方案，我想知道