我目前正在使用以下代码,在鼠标移动时平移我的网站的背景图片:
$('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;
乍一看,显然不会也不应该工作,因为背景图像始终与浏览器的大小相同,因此无法平移。 由于浏览器窗口永远不会完全是最大高度(由于书签工具栏等原因),因此可以进行垂直移动。 是否可能拥有“覆盖背景”,但同时将背景图像调整几个像素,使其略大于视口,但也自动调整大小?