Question

我正在使用以下代码移动鼠标时平移我网站的背景图像

$('body').mousemove(function(e){
    var mousePosX = 50 + (e.pageX/$(window).width())*25;
    var mousePosY = 50 + (e.pageY/$(window).height())*25;
    $('body').css('backgroundPosition', mousePosX + '% ' +  mousePosY + '%');
});

这适用于较大的背景图像（例如宽度为2000像素）。有没有办法做同样的事情，但

background-size: cover;

？乍一看它不会也不应该显而易见，因为背景图像总是与浏览器大小相同，因此无法平移。由于浏览器窗口永远不会是最大高度（书签工具栏等的原因），因此它可以使用垂直移动。是否可以有一个“封面背景”，但是也可以调整背景图像的某些像素大小，使其略大于视口，但也会自动调整大小？

Answer 1

body{
    background:url(IMAGE);
    background-size: 110%;
    background-position: -10px -10px;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

背景图像平移与背景大小：封面？

1 个答案: