鼠標移動後跟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，它會很好地工作。此規則

將背景圖像縮放爲儘可能大，以使背景區域完全被背景圖像覆蓋。

在你的情況下，背景圖像的高度顯示完全，所以背景圖像不能垂直移動。