背景图像使用background-size：cover时如何平移？

Question

背景图像使用background-size：cover时如何平移？

4

我目前正在使用以下代码，在鼠标移动时平移我的网站的背景图片：

$('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;

乍一看，显然不会也不应该工作，因为背景图像始终与浏览器的大小相同，因此无法平移。由于浏览器窗口永远不会完全是最大高度（由于书签工具栏等原因），因此可以进行垂直移动。是否可能拥有“覆盖背景”，但同时将背景图像调整几个像素，使其略大于视口，但也自动调整大小？

- sigug

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ruben-J · Accepted Answer

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