无法更改使用视差滚动的图像的宽度

Question

我无法更改使用从教程复制的视差滚动代码的图像的宽度。 我知道在图像示例中div框和图像也不能完美对齐，但是由于某种原因，我没有使用壁纸尺寸的图像，因为示例中它太大而无法完美对齐，所以不必担心div间距问题。

Jsfiddle- https: //jsfiddle.net/fouvdjm8/1/

HTML代码

<html>
<!doctype html>
<head>
<title>Parallax Scrolling Tutorial</title>
<!-- CSS Code -->
<link rel="stylesheet" href="style.css">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Section #1 -->
<section id="home" data-speed="10" data-type="background">
<article></article>
</section>
<div id="box"></div>
</body>
</html>

CSS代码

body{
margin:0;
padding:0;
}
#home { 
background: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg) 50% 0 no-repeat fixed; 
height: 1000px;  
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative;
}
#box {
height: 1000px;
width: auto;
background-color: blue;
}

JS代码

$(document).ready(function(){
// Cache the Window object
$window = $(window);

$('section[data-type="background"]').each(function(){
 var $bgobj = $(this); // assigning the object

  $(window).scroll(function() {

    // Scroll the background at var speed
    // the yPos is a negative value because we're scrolling it UP!                              
    var yPos = -($window.scrollTop() / $bgobj.data('speed')); 

    // Put together our final background position
    var coords = '50% '+ yPos + 'px';

    // Move the background
    $bgobj.css({ backgroundPosition: coords });

}); // window scroll Ends
}); 
});

Answer 1

您的CSS家庭课程应如下所示

#home { 
   background: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg) no-repeat center 0 fixed; 

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

   height: 1000px;  
   margin: 0 auto; 
   width: 100%; 
   max-width: auto; 
   position: relative;
}

无法更改使用视差滚动的图像的宽度

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-04-06 10:58:27

无法更改使用视差滚动的图像的宽度

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-04-06 10:58:27

解决方案1
1 已采纳 2016-04-06 10:58:27