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

【问题标题】：html - how to make images stay on certain part of backgroundhtml - 如何使图像停留在背景的某些部分
【发布时间】：2019-07-09 21:40:37
【问题描述】：

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

【问题讨论】：

你可能需要使用百分比而不是像素
@Pete 我将如何做到这一点，同时仍然能够将图像保持在相对于背景的同一位置

标签： html css image background

【解决方案1】：

在 %'s 中使用绝对定位

HTML：

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

CSS：

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

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

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

相对：相对于自然位置

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

【讨论】：

实际上现在当我左右调整窗口大小时，图像会调整大小，但它们不会相对于背景保持在同一个位置......
你能创建一个相关标记和 CSS 的 JSfiddle 吗？所以我可以尝试提供更多帮助。在此处创建jsfiddle.net

【解决方案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() 函数中的值，直到您对结果满意为止。

【讨论】：

【解决方案3】：

我不太明白你的问题（也许你应该尝试放一些代码或创建一个 jsfiddle）。

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

我猜this sample from W3C 是你需要的。

【讨论】：