我正在使用脚本根据鼠标移动/手机移动将背景位置移动一定的像素距离。但是,我很难想出一种方法来始终让背景扩展包含div 的整个宽度和高度。该脚本确实可以根据鼠标移动移动背景。但它使背景图像移动太多,并导致空白。
看看小提琴,你就会明白我的意思。
小提琴:http://jsfiddle.net/K9Ae7/2/
.HTML:
<section id="court-fitness" data-parallaxify-background-range="30"></section>
.CSS:
#court-fitness {
height: 500px;
width: 100%;
background:url('https://www.tourresource.com/Board/Themes/SMF_Grunge/images/bg.jpg');
background-repeat: no-repeat;
}
.JS:
$('#court-fitness').hover(function () {
$(this).parallaxify({
parallaxBackgrounds: true,
useMouseMove: true,
useGyroscope: true,
inputPriority: 'mouse'
});
},
function () {
$(this).parallaxify('destroy');
});
脚本的其余部分在小提琴中。谢谢。
看看这个:
#court-fitness {
height: 500px;
width: 110%;
margin-left: -5%;
margin-top: -5%;
background:url('https://www.tourresource.com/Board/Themes/SMF_Grunge/images/bg.jpg');
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
z-index: -1;
}
小提琴