我有一个背景图片,需要根据窗口大小改变其大小,并且我需要定位一个元素在上面,使它始终相对于背景图片保持在同一位置。
怎么做呢?
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;
}