Fatal编程技术网
  • javascript/
  • Javascript 为什么赢了'；我的背景不在div容器中显示吗？

Javascript 为什么赢了'；我的背景不在div容器中显示吗？

javascript jquery html css

Javascript 为什么赢了'；我的背景不在div容器中显示吗？,javascript,jquery,html,css,fullpage.js,Javascript,Jquery,Html,Css,Fullpage.js,我使用的是Fullpage.js，到目前为止添加背景还不是问题。由于某些原因，我的背景没有显示在其中一个页面（博客页面）上。我设置了一个背景色，看看它是否只是div，背景色工作正常。有什么我没看见的吗 编辑：我在第一张幻灯片中使用了相同的文件路径，它可以很好地工作，所以我知道该路径很好 CSS: HTML: <body> <div id="fullpage"> <!------------------------- HEADER

我使用的是Fullpage.js，到目前为止添加背景还不是问题。由于某些原因，我的背景没有显示在其中一个页面（博客页面）上。我设置了一个背景色，看看它是否只是div，背景色工作正常。有什么我没看见的吗

编辑：我在第一张幻灯片中使用了相同的文件路径，它可以很好地工作，所以我知道该路径很好

CSS:

HTML:

<body>
    <div id="fullpage">

        <!-------------------------    HEADER    ----------------------------->

        <div class="section header">
            <div class="container">
                <div class="offset-md-4 name">
                    <h1>temple naylor</h1>
                    <h5>Full Stack Web Developer</h5>
                </div>
            </div>
            <div class="container">
                <div class="offset-md-4 social-links">
                    <a href="https://www.linkedin.com/in/templenaylor"><i class="fa fa-linkedin linkedin"></i></a>
                    <a href="https://github.com/templenaylor"><i class="fa fa-github github"></i></a>
                    <a href="https://www.instagram.com/templecerulean/"><i class="fa fa-instagram instagram"></i></a>
                    <a href="https://dribbble.com/templenaylor"><i class="fa fa-dribbble dribbble"></i></a>
                </div>
            </div>
        </div>

        <!-------------------------    ABOUT    ----------------------------->

        <div class="section #about">

            <div class="container">

                <div class="row">
                    <div class="col-md-12 about-you">
                        <h2>About You</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 you-text">
                        <p>Let's cut the bull - What can I do for you? I am a <strong>Full Stack Developer</strong> that will offer a variety of services. 
                            <br>My main focus however is Front End Development. I create <strong>websites</strong> and <strong>applications</strong> for <strong>everyone</strong>, from a customers personal portfolio to a businesses landing page. <br>I believe in creating with the <strong>users perspective</strong> in mind from start to finish.</p>
                    </div>
                    <div class="col-md-6 you-text">
                        <p>No matter how stunning the typography, images, or content, it is pointless if it cannot be presented with a <strong>intuitive experience</strong> for the user. <br>No matter <strong>your goal</strong>, I will make sure <strong>your story</strong> is told whether that needs to be done with a <strong>website</strong> or <strong>APP</strong>.</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 about-me">
                        <h2>About Me</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 me-text">
                        <p>I am both a <strong>graduate</strong> and <strong>self taught</strong> developer. <br>My knowledge consists of <strong>HTML/CSS</strong>, <strong>JavaScript</strong>, <strong>Angular</strong>, <strong>SQL</strong>, <strong>PHP</strong> &amp; <strong>C#</strong>. <br>I believe in personal growth as well as learning everyday, and coding is one of the many challenges that provides that outlet for me.</p>
                    </div>
                    <div class="col-md-6 me-text">
                        <p>When I am not working on the next <strong>hottest product</strong>, you can find me <strong>reading</strong>, exploring <strong>architecture</strong>, finding new <strong>music</strong>, getting my next <strong>tattoo</strong>, or pursuing my next <strong>dream</strong>.</p>
                    </div>
                </div>
            </div>
        </div>


        <div class="section">
            <div class="slide"><img class="model-page" src="img/modelpage.png">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 button-info">
                            <a href="#"><i class="fa fa-dribbble dribbble"></i></a>
                            <a href="#"><i class="fa fa-github github"></i></a>
                        </div>
                    </div>
                </div>
            </div>


            <div class="slide"><img class="apple-page" src="img/applepage.png">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 button-info">
                            <a href="#"><i class="fa fa-dribbble dribbble"></i></a>
                            <a href="#"><i class="fa fa-github github"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="slide dribbble-page">
                <div class="container">
                    <div class="row dribbble-icon">
                        <div class="col-md-12"><i class="fa fa-dribbble"></i></div>
                    </div>

                    <div class="row info">
                        <div class="col-md-12 link-dribbble"><a href="#" style="text-decoration:none"><h3>Please checkout my dribbble profile for more.</h3></a></div>
                    </div>
                </div>
            </div>
        </div>



        <!-------------------------    BLOG    ----------------------------->
        <div class="section blog">Some section</div>


    </div><!--FULLPAGE WRAPPER DIV-->

    <script>
        $(document).ready(function() {
            $('#fullpage').fullpage({
                navigation: true,
                navigationPosition: 'right',
                scrollOverflow: true
            });
        });
    </script>
</body>


内勒神庙
全栈Web开发人员
关于你
让我们别胡闹了，我能为你做什么？我是一名全栈开发人员，将提供多种服务。

然而，我的主要关注点是前端开发。我为每个人创建网站和应用程序，从客户个人投资组合到企业登录页
我相信在创作过程中始终牢记用户视角

无论字体、图像或内容多么令人惊叹，如果不能为用户提供直观体验，则毫无意义
无论你的目标是什么，我都会确保你的故事是通过网站还是应用程序来实现的

关于我
我既是一名毕业生又是一名自学开发人员
我的知识包括HTML/CSS，JavaScript，Angular，SQL，PHP&C#
我相信个人成长和每天的学习，而编码是为我提供出路的众多挑战之一

当我不在开发下一个最热门的产品时，你可以找到我阅读、探索建筑、寻找新的音乐、获得下一个纹身、或追求下一个梦想

某段
$（文档）.ready（函数（）{
$（“#全页”）。全页({
导航：对，
导航位置：'右'，
scrollOverflow：真
});
});
如有任何建议，将不胜感激，谢谢

编辑：我在第一张幻灯片中使用了相同的文件路径，它可以正常工作，因此我知道该路径很好。

我在JSFIDLE中看到了您的代码，我认为您提到了错误的图像背景路径。

您可能对背景图像有错误的路径-~尝试在第一张幻灯片之前添加“…”

background: url('../img/paint.jpg') no-repeat center center fixed;
基本上，由于图像位于css文件夹之外的文件夹中，因此您需要退出css文件夹，然后进入img文件夹以获得所需的图像

由于fullpage插件的工作方式，似乎不需要固定属性。我建议从您的背景中删除固定属性。因此，您的博客类（在css中）应该如下所示：

.blog {
    background: url(Path_to_image) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
或者

标题的
背景
正在工作？您的图像路径是
/img/paint.jpg
。此路径应与css文件相对。如果你的css在
styles/
下，你的图像应该是
styles/img/paint.jpg
，你的样式应该是
background:url（'img/paint.jpg'）
这与标题页面使用的背景img相同，效果很好。它必须是其他内容。可能是
。部分
覆盖
。标题
样式。标题幻灯片的路径相同，并且可以正常工作，因此它必须是其他内容。检查问题的完整描述。第一张幻灯片使用了相同的背景路径，而那张幻灯片效果很好。这就成功了！！非常感谢，非常感谢。从来没有人会认为这一属性会导致这种情况。再次感谢你。

.blog {
    background: url(Path_to_image) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



.blog {
   background-image: url(Path_to_image);
   background-repeat   : no-repeat;
   background-position : center center;
   background-size     : cover;

}