Question

我正在进行FreeCodeCamp Web开发课程，而且我一直在制作我的个人资料页面。该网站需要有超过3个部分，并且应该只有一个页面。我想要的是一个不同的图像作为每个背景。到目前为止，我只能添加第一个图像和文本，并具有平滑滚动。我几周以来一直试图添加其他图像，但它不起作用。

此外，我希望文本保持在同一个位置，但要滚动的图像，这也不会发生。

我正在使用codepen.io和Bootstrap。我将添加笔的链接，以便您可以查看代码。

我不确定这是否是提出问题的正确方法，但我已经添加了我能提供的所有信息。提前谢谢！

链接到我的笔：http://codepen.io/AnInternetUser/pen/LNKGMY

代码：

  $(document).ready(function() {
$('.nav li a').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var $target = $(this.hash);
        $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
        if ($target.length) {
            var targetOffset = $target.offset().top;
            $('html,body').animate({
                scrollTop : targetOffset
            }, 750);
            return false;
        }
    }
});
});

body {
  padding-top: 70px;
}

.hello {
  padding-top: 70px;
  background-image: url('http://res.cloudinary.com/aninternetuser/image/upload/v1463638974/hd-wallpaper-40_cdz9co.jpg');
  repeat: no-repeat;
  background-size: cover;
}

.hello h1 {
  font-family: Oswald;
  text-align: center;
  color: white;
  font-size: 125px;
}

.hello h3 {
 font-family: Oswald;
 text-align: center;
 color: white;
}

.jumbotron {
  background-color: grey;
}

.experience {
  background-image: url('http://res.cloudinary.com/aninternetuser/image/upload/v1463648167/desktop-desktops-highway-night-photo-hdwallpapers2016com_hcpltl.jpg');
  repeat: no-repeat;
  background-size: cover;
}

	<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Krunal Rindani</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#home">Home</a>
                </li>
                <li>
                    <a href="#projects">Projects</a>
                </li>
                <li>
                    <a href="#about">About</a>
                </li>
                <li>
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="hello" id="home" style="min-height:1000px;min-width:1000px;">
        <h1></h1>
        <h1></h1>
        <h1>Hello.</h1>
        <div class="jumbotron">
            <h3>This is my portfolio website. You can find my contact details and past work here. You can also learn more about me here!</h3>
        </div>
    </div>
    <div id="projects" class="experience" sytle="min-height:1000px;min-width:1000px;">
        <h2>This area will be updated with all the web projects done by me. Stay tuned!</h2>
    </div>

    <div id="about" style="min-height:1000px;">

    </div>

    <div id="contact" style="min-height:1000px;">

    </div>
</body>
</html>

如何在单页可滚动网页的每个部分中添加背景图像？

0 个答案: