我有一个背景图像,它改变了窗口大小的大小,我需要在它上面放置一个元素,使它总是在相对于背景图像的相同位置。
怎么样!?
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;
}
你所要求的并不是一件微不足道的事情,它主要涉及搞清楚background-size:cover
是如何工作的,然后使用JavaScript定位你的元素。由于background-size:cover
的性质,图像如何流出x轴或y轴,这不能用CSS完成。
这是我对问题的解决方案,在加载和调整大小时,它会计算图像的比例和x或y偏移量,并在相关位置绘制指针。
jsFiddle (red dot in Google's red '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);
}
我将不得不猜测你的标记,但是假设你有一些容器用于背景图像,而你需要同时居中的另一个图像就在里面,就像这样:
<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%;
}
这完全取决于您尝试居中的图像的大小。
添加一个定心容器:
#container {
position: fixed;
width: 0;
height: 0;
top: 50%;
left: 50%;
overflow: visible;
}
然后在里面添加position: relative
元素。
相对(可伸缩,响应,插入流行词)单位(%)。
响应式设计需要做更多的工作。您必须测试要对齐的图像区域与窗口大小的对应位置,然后根据窗口大小将这些值与元素放置相匹配。但是封面偏离了图像本身的宽高比,并且与宽度或高度相匹配。因此,根据窗口的宽高比,它会弄乱您的布局。
您可以尝试使用jQuery和javascript来获取窗口的尺寸,然后jquery将图像的尺寸与该尺寸相匹配并更改元素的尺寸。大量的编码工作,页面加载很难,但我们必须做出牺牲,不是吗?
我会为你要放在背景上的道具创建一系列位置。使用完整大小的背景图像中的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");
这样,计算位置并将对象移动到它们的唯一代码是一个小函数。