Question

我试图让我的背景跟随鼠标并且它成功地在Y轴上工作但由于某种原因不能跟随X轴。关于如何让背景跟随X的任何建议？

参见小提琴示例

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，它将完美无缺。这个规则

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

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

Mousemove背景跟随Y但不是X轴

2 个答案: