全屏視差背景

我正在學習如何使用jQuery插件jParallax使用視差效果。到目前爲止，我所做的工作正常，但我需要使視差影響整個屏幕。我將它應用於身體標記，但這顯然不起作用。 Here是它的外觀。全屏視差背景

這是代碼。

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> 
<link rel="stylesheet" type="text/css" href="css/jquery.parallax.css" /> 
<style type="text/css"> 
.parallax-viewport { 
    height:20em; 
    max-width:60em; 
    width:100%; 
} 
</style> 

<script type="text/javascript" src="js/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="js/jquery.parallax.js"></script> 
<script type="text/javascript" src="js/jquery.event.frame.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
    $('#parallax .parallax-layer') 
    .parallax({ 
     mouseport: $('#parallax') 
    }); 
}); 
</script> 

</head> 

<body id="parallax" class="parallax-viewport"> 

    <div class="parallax-layer" style="width:600px; height:274px;"> 
     <img src="images/background_layers/bottom_layer.png" /> 
    </div> 
    <div class="parallax-layer" style="width:1100px; height:284px;"> 
     <img src="images/background_layers/mid_layer.png" /> 
    </div> 
    <div class="parallax-layer" style="width:1360px; height:320px;"> 
     <img src="images/background_layers/top_layer.png" /> 
    </div> 

</body> 
</html>

如何填充整個屏幕的視差背景？

來源

2012-11-16 Isuru

你可以嘗試改變你的.parallax-viewport高度20em;到100％

來源

2012-11-16 18:56:30 SpoonIsBad

這是我嘗試的第一件事，但它沒有改變任何東西。 – Isuru

全屏視差背景

回答

相關問題