Question

所以我试图得到这个确切的效果：http://codepen.io/chrisboon27/pen/rEDIC

我无法在我的代码中使用它。

这是我的css，我希望将此效果应用于：

#header {

margin: -8px 0 0 0;
background-image:url(img/header_bg.jpg);
background-repeat:no-repeat;
background-position:center;
position:relative;
background-size: cover;

}

<div id="header"> </div>

这是JS：

    $(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#header").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
          $('#header').css("background-position", newvalueX+"px     "+newvalueY+"px");
});
});

我的css与人的codepen css不同 - 这可能就是为什么它不起作用，但是当我改变它时，它会搞砸背景（它消失了）。任何帮助都会非常感激 - 我对js知之甚少。

谢谢！

编辑：从不介意：固定它。我把它移到了标签的上方 - 而不是把它放在顶部。

Answer 1

添加position:absolute或position:fixed会使其正常运行。 position:relative无法按原样计算height。

Answer 2

我认为这是因为你忘了在CSS中设置图像的宽度和高度：

#header {
    margin: -8px 0 0 0;
    background-image:url(http://www.brandwatch.com/wp-content/uploads/2012/04/570x320xtrolls.jpg.pagespeed.ic.-hEjJryY-x.jpg);
    background-repeat:no-repeat;
    background-position:center;
    position:relative;
    background-size: cover;
    height: 570px;
    width: 320px;
}

Fiddle here

如何使用光标移动背景图像？试图实现这个codepen

2 个答案: