Javascript 鼠标移动Y轴而非X轴后的背景

我试图让我的背景跟随鼠标，它在Y轴上成功工作，但由于某些原因，它不会跟随X轴。有什么建议可以让我了解X的背景吗

例如看小提琴

CSS

JS

---

如果省略

背景尺寸：cover

，它将非常有效。这条规则

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

在您的情况下，背景图像的高度将完全显示，因此背景图像无法垂直移动

一些小变化：

.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;
}

及

如果你继续，使背景大小为120%，并以负Y值作为背景位置开始，你可以安全地使用（X/5，Y*-2）作为坐标，它会更平滑，只需确保你有一个漂亮的高分辨率图像

如果有人倾斜得太远，这也可以防止图像边缘显示出来

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

.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 + '%');
});