Question

我正在学习如何使用jParallax jQuery插件来使用视差效果。到目前为止，我所做的工作正常，但我需要让视差影响整个屏幕。我将它应用于身体标签，但这显然不起作用。 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>

如何用视差背景填充整个屏幕？

Answer 1

您可以尝试将.parallax-viewport高度从20em更改为;到100％

全屏视差背景

1 个答案: