Question

我正在尝试在网站WRT中实现视差效果以下链接

https://github.com/richardshepherd/Parallax-Scrolling

enter image description here

然而在网站上添加了一个图像（parkview）屏幕短片，我需要保持静止，以便我可以添加菜单和子菜单，当前它像其他图像一样移动。

我尝试将其设置为背景，但整个背景都会发生变化。

我该如何解决？

这是工作代码

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Parallax Scrolling Tutorial</title>
  <meta name="description" content="How to create a parallax scrolling effect with jQuery, HTML and CSS">
  <meta name="author" content="Richard Shepherd, Smashing Magazine">

  <!-- Mmmmm, Google Web Fonts. That's a paddlin'. -->
  <link href='http://fonts.googleapis.com/css?family=Lobster+Two:700&v2' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

        <div class="log">
        <a href="home.htm"><img src="images/logo.png"></a>
        </div>

  <div id="main" role="main">

    <!-- Section #1 / Intro -->
    <section id="first" class="story" data-speed="8" data-type="background">        
        <div class="smashinglogo" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>     
        <article>

            <img src="images/tutorial-title.png" alt="tutorial-title" width="711" height="242" />
            <p>Words and pictures by Richard Shepherd / Twitter: <a href="http://twitter.com/richardshepherd" target="_blank">@richardshepherd</a> / Web: <a href="http://richardshepherd.com">richardshepherd.com</a></p>
            <p>GitHub: <a href="https://github.com/richardshepherd/Parallax-Scrolling/">Fork it here!</a></p>
        </article>
    </section>


  <script src='js/libs/jquery-1.6.1.min.js'></script>
  <script src="js/script.js"></script>


</body>
</html>

Answer 1

您可以向其添加position: fixed或使用background和background-attachment: fixed制作其他元素。

在视差网页中使图像静止不动？

1 个答案: