17

我有一个将大小更改为窗口大小的背景图像，我需要在其上放置一个元素，以便它相对于背景图像始终位于同一位置。

如何！？

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;
}
4

5 回答 5

32

您所要求的根本不是一件小事，它基本上涉及弄清楚如何background-size:cover工作，然后使用 JavaScript 定位您的元素。由于background-size:cover图像如何从 x 轴或 y 轴流出的性质，这不能用 CSS 完成。

这是我对该问题的解决方案，在加载和调整大小时，它会计算图像的比例和 x 或 y 偏移量，并在相关位置绘制指针。

jsFiddle（谷歌红色'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);
}
于 2013-04-05T15:43:39.213 回答
1

我将不得不猜测您的标记，但假设您有一些用于背景图像的容器，并且您的其他图像也需要居中，如下所示：

<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%;
}

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

于 2013-04-05T15:12:12.743 回答
1

我会为你要放在背景上的道具创建一个位置数组。使用全尺寸背景图像中的 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");

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

于 2017-11-03T06:40:06.540 回答
0

添加一个居中容器：

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

然后在里面添加position: relative元素。

于 2013-04-05T15:12:18.613 回答
0

相对（可扩展、响应、在此处插入流行语）单位 (%)。

响应式设计需要更多的工作。您必须根据窗口大小测试要对齐的图像区域的位置，然后根据窗口大小将这些值与元素放置相匹配。但是封面正在偏离图像本身的纵横比，并且与宽度或高度匹配。所以根据窗口的纵横比，它会弄乱你的布局。

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

于 2013-04-05T15:44:03.243 回答