Question

我希望我的背景滚动速度比我的网页内容慢。我的背景在我体内。没有div类“东西” 请不要将此标记为“有人已经问过这个”，因为我看过那些，但他们没有为我工作。我认为这是HTML或JavaScript的旧版本。不过不确定如果你认为有问题，这是我的代码

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Website</title>

        <link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="myscripts.js"></script>
    </head>
    <body>
        <br>
        <div class = "navbar">

        &nbsp;&nbsp;
        <iframe     src="http://free.timeanddate.com/clock/i4sgdhg1/n103/fn4/fs16/fc00f/tct/pct/ahl/    avt/ftb/bas3/bat0/bac00f/pa8/tt0/tw1/th2/ta1/tb4" frameborder="0"           width="198"height="56" allowTransparency="true"></iframe>

        </div>
          <div class = "stuff">
        <center>
            <br><br>
        Content Not Yet Added... :(
        </body>
        </div>
        <div class = "footer">
            <br>
            <br>
        </div>
    </center>
</html>

CSS：

body {
background-image: url("background.jpg");
background-color: orange;
background-attachment: fixed;
}


.stuff{
padding-top: 40px;
padding-bottom: 40px;
position: inherit;
height: auto;
width:100%;
}


.navbar{
margin-top: -10px;
z-index: 1;
height: 9%;
position:fixed;
width: 98.7%;
background: rgba(255, 0, 0, 0.21);
margin-bottom: 20%;
}


.footer {
width: 640px;
margin: 0% -320px;
height:44px;
position: fixed;
left: 50%;
bottom: 0%;
background: rgba(255, 0, 0, 0.2);
}

JavaScript的：

/* not written yet */

Answer 1

这可能会让您走上正轨。查看“视差滚动”

这是一个包含演示的网站：

http://www.creativebloq.com/web-design/parallax-scrolling-1131762

要开始使用，请查看本教程（可能不是您需要的，但您会得到图片）：

https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

祝你好运：）

我希望我的背景滚动比我的内容慢

1 个答案: