Question

我有一个背景图片，其中CSS的大小是封面，所以它会在浏览器窗口调整大小时调整大小。但是当我放置图像时，我如何定位它们以便它们根据背景留在某个地方？我尝试使用左：... 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属性。

我猜你需要this sample from W3C。

HTML - 如何使图像保持在背景的某些部分

3 个答案: