我有一个将大小改变为窗口大小的背景图像,我需要在其上放置一个元素,以便它总是在相对于背景图像的相同位置.
怎么样！？
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";
背景图像覆盖整个背景,并通过窗口更改大小,但通过具有某些重叠来保持比例.
EDIT – 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定位你的元素.由于背景大小的性质：覆盖图像如何流出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);
}
