在背景图像上方放置元素。但是背景图像随着窗口的大小而改变大小。CSS。

Question

我有一个背景图片，需要根据窗口大小改变其大小，并且我需要定位一个元素在上面，使它始终相对于背景图片保持在同一位置。

怎么做呢？

CSS

background:url("http://placehold.it/100x100") no-repeat center center fixed;
-webkit-background-size:"cover";
-moz-background-size:"cover";
-o-background-size:"cover";
background-size:"cover";

背景图像覆盖整个背景，随窗口大小变化但保持比例，并通过添加一些遮罩来实现。

编辑 - 2016

我使用纯CSS的解决方案是将元素定位在中心，然后使用calc函数正确偏移它。然后根据vmin值调整其大小：

$offset-top: ...;
$offset-left: ...;

.element {
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + #{$offset-top}), calc(-50% + #{$offset-top}));
  width: 50vim; 
  height: 50vim;
}

- Dustin Silk

---

你尝试过使用JavaScript/jQuery来定位它吗？ - Pedro Estrada

如果我理解正确，为什么不将元素相对于body绝对定位？如果背景图像占用整个视口，则相对于body的绝对定位应该能解决问题。 - Lowkase

你的背景图片附加在哪个元素上？是body还是某个容器div？你能发布一些你正在使用的HTML吗？ - Marc Audet

http://www.growingwiththeweb.com/2013/04/aligning-and-element-with-background.html - Avigrail

Answer 1

你所要求的并不是一件微不足道的事，它基本上涉及弄清楚background-size：cover的工作原理，然后使用JavaScript定位你的元素。由于background-size：cover的性质，图像如何超出x轴或y轴，这不能用CSS来实现。

以下是我解决该问题的方案，在加载和调整大小时，它计算图像的比例和x或y偏移量，并在相关位置绘制指针。 jsFiddle (Google的红色'o'中的红点) HTML

<div id="pointer"></div>

CSS

body {
    background:url(https://www.google.com.au/images/srpr/logo4w.png) no-repeat center center fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

#pointer {
    margin-left:-10px;
    margin-top:-10px;
    width:20px;
    height:20px;
    background-color:#F00;
    position:fixed;
}

JS

var image = { width: 550, height: 190 };
var target = { x: 184, y: 88 };

var pointer = $('#pointer');

$(document).ready(updatePointer);
$(window).resize(updatePointer);

function updatePointer() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    // Get largest dimension increase
    var xScale = windowWidth / image.width;
    var yScale = windowHeight / image.height;
    var scale;
    var yOffset = 0;
    var xOffset = 0;

    if (xScale > yScale) {
        // The image fits perfectly in x axis, stretched in y
        scale = xScale;
        yOffset = (windowHeight - (image.height * scale)) / 2;
    } else {
        // The image fits perfectly in y axis, stretched in x
        scale = yScale;
        xOffset = (windowWidth - (image.width * scale)) / 2;
    }

    pointer.css('top', (target.y) * scale + yOffset);
    pointer.css('left', (target.x) * scale + xOffset);
}

- Daniel Imms

---

+1 为你抽出时间写个例子点赞。我只是咯咯笑着指了指远方... - Plummer

对于那些需要的人，我已经修改了代码以使用多个点。http://jsfiddle.net/dvksg9vk/ - Beertastic

http://www.growingwiththeweb.com/2013/04/aligning-and-element-with-background.html - Avigrail

通过使用position:absolute并操纵img的left、top、width和height样式，来实现@MicFin。 - Daniel Imms

Answer 2

我会创建一个道具位置的数组，用于放置在背景上。使用完整大小背景图像中的x和y位置...

var propPositions = [
  { name: "StoveBurner1", x: 23, y: 566 },
  { name: "StoveBurner2", x: 676, y: 456 },
  { name: "TableChair1", x: 765, y: 35 },
  ...
];

你还需要保留背景的完整尺寸，以便在大小更改时使用它来计算缩放因子。

var fullBackgroundSize = { width: 1920, height: 1080 };

当图像大小改变时，计算缩放因子，然后对数组中每个元素的x和y位置进行缩放...

for (var i = 0; i < propPositions.length; i++)
{
    propPositions[i].x *= scalingFactor;
    propPositions[i].y *= scalingFactor;
}

这将使您能够精确定位所有道具，而不受图像大小的限制。

这还允许您通过名称查找位置，这将使您能够执行诸如...的操作。

placeObject(pot1, "StoveBurner1");
placeObject(pot2, "StoveBurner2");
placeObject(SittingPerson, "TableChair1");

那样，唯一计算位置并将对象移动到它们的代码只在一个小函数中。

- Rodney P. Barbati

Answer 3

我要猜测一下你的标记，但假设你有一个容器用于背景图片，需要居中的其他图片也在其中，代码如下：

<div class="holdBGimg">
    <img src="image.jpg">
</div>

你可以这样做：

.holdBGimg {
    position: relative;
}
.holdBGimg img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

如果您需要弥补高度和宽度的偏移量，可以通过从相对边距中减去该测量值的一半来实现。

如果您想进行缩放，则解决方案可能更多地沿以下方向：

.holdBGimg {
    position: relative;
}
.holdBGimg img {
    width: 20%;
    height: 20%;
    position: absolute;
    top: 40%;
    left: 40%;
}

这完全取决于您要居中的图片大小。

- Elizabeth Fuller

---

我认为OP已经处理好了背景图片（他表达得不是很清楚，但他的代码表明了这一点）。他想要的是内容跟随背景图片（例如，相对于背景保持在同一位置）。 - Albert Xing

我正在使用一个img元素，但所引用的元素可以是任何东西。标记可以是<div class="holdBGimg"><div>这是我的内容</div></div>并具有相同的效果。重点是限制高度、宽度和定位。 - Elizabeth Fuller

我有一个背景图片，它会随着窗口大小的改变而改变大小。这可能更像是 body { background: //blahblahblah; } 而不是一个背景容器。 - Plummer

没什么区别，只需更改标记：<body class="holdBGimg"><div class="shiftable">这是正在移动的内容</div></body>，然后将相同的标记更改为“.holdBGimg img”变为“body div.shiftable”。 - Elizabeth Fuller

@ElizabethFuller，好的，我对你使用 img 的方式感到困惑。 - Albert Xing

Answer 4

相对单位（可缩放，响应式，插入流行词）%

响应式设计需要更多的工作。您需要测试图像要对齐的区域在窗口大小方面的位置，然后将这些值与窗口大小相对应的元素位置进行匹配。但是封面是根据图像本身的纵横比匹配宽度或高度。因此，根据窗口的纵横比，它会破坏您的布局。

您可以尝试使用jQuery和javascript来获取窗口的尺寸，然后将jquery的图像尺寸与之匹配，并更改元素的尺寸。需要大量编码工作，对页面加载速度有影响，但我们必须做出牺牲，不是吗？

- Plummer

Answer 5

添加一个居中容器：

#container {
    position: fixed;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    overflow: visible;
}

然后在内部添加position: relative元素。

- Albert Xing