鼠标移动后跟Y但不是X轴的背景

Question

我想让我的背景跟随鼠标，它成功地在Y轴上工作，但由于某种原因不会跟随X轴。关于如何获得关于X的背景的任何建议？

见捣鼓例

https://jsfiddle.net/7dkj6beo/

CSS

.banner{ 
    text-align: center; 
    background-image: url('http://maxpixel.freegreatpicture.com/static/photo/1x/Graphic-Spotlight-Material-Background-Texture-1988180.jpg'); 
    background-position: 50% 50%; 
    background-size: cover; 
    padding: 200px 0; 
} 

h1{ 
    color: #FFF; 
} 

JS

$('.banner').mousemove(function(e){ 
    var amountMovedX = (e.pageX)/5; 
    var amountMovedY = (e.pageY)/5; 
    $(this).css('background-position', amountMovedX + '% ' + amountMovedY + '%'); 
    }); 

Answer 1

一些小的改动：

.banner{ 
text-align: center; 
background-image: url('http://maxpixel.freegreatpicture.com/static/photo/1x/Graphic-Spotlight-Material-Background-Texture-1988180.jpg'); 
background-position: 50% -20%; 
background-size: 120%; 
background-attachment: fixed; 
padding: 200px; 
} 

而且

$('.banner').mousemove(function(e){ 
var amountMovedX = (e.pageX)/5; 
var amountMovedY = (e.pageY) * -3; 
$(this).css('background-position', amountMovedX + '% ' + amountMovedY + '%'); 
}); 

如果你继续前进，使背景尺寸为120％，并与你的背景位置的负Y值开始，你可以安全地用（X/5，Y * -2）代表你的坐标，它会更平滑，只要确保你有一个很好的高分辨率图像。

如果有人向旁边倾斜太远，这也会阻止图像的边缘显示。

Answer 2

如果省略background-size: cover，它会很好地工作。此规则

将背景图像缩放为尽可能大，以使背景区域完全被背景图像覆盖。

在你的情况下，背景图像的高度显示完全，所以背景图像不能垂直移动。