我使用的是Fullpage.js，到目前为止添加背景并不是问题。出于某种原因，我的背景没有显示在其中一个页面上（博客页面）。我设置了一个背景颜色，看它是否只是div，背景颜色很好。有没有我没看到的东西？
编辑：我在第一张幻灯片中使用相同的文件路径，它可以正常工作，所以我知道路径很好。
CSS：
/*------------------------------------------------------
HEADER PAGE
-------------------------------------------------------*/
.header {
text-align: center;
background: url('/img/paint.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.name {
float: right;
margin-bottom: 0;
padding-bottom: 0;
}
.name h1 {
text-transform: uppercase;
color: black;
font-family: 'Oswald', sans-serif;
font-size: 300%;
}
.name h5 {
color: grey;
font-family: 'Yrsa', serif;
font-size: 150%;
float: right;
padding-top: -1%;
margin-top: -5%;;
}
.social-links {
float: right;
padding-top: 10%;
font-size: 175%;
}
.linkedin {
color: #1E8BC3;
transition: all .2s ease-in-out;
}
.github {
color: black;
transition: all .2s ease-in-out;
}
.instagram {
color: #2980b9;
transition: all .2s ease-in-out;
}
.dribbble {
color: #FF69B4;
transition: all .2s ease-in-out;
}
.fa-github:hover {
transform: scale(1.2);
color: #222;
-webkit-transition: all .35s ease-out;
-moz-transition: all .35s ease-out;
-o-transition: all .35s ease-out;
-ms-transition: all .35s ease-out;
transition: all .35s ease-out;
}
.fa-linkedin:hover {
transform: scale(1.2);
color: #43ace2;
-webkit-transition: all .35s ease-out;
-moz-transition: all .35s ease-out;
-o-transition: all .35s ease-out;
-ms-transition: all .35s ease-out;
transition: all .35s ease-out;
}
.fa-instagram:hover {
transform: scale(1.2);
color: #4ea1d8;
-webkit-transition: all .35s ease-out;
-moz-transition: all .35s ease-out;
-o-transition: all .35s ease-out;
-ms-transition: all .35s ease-out;
transition: all .35s ease-out;
}
.fa-dribbble:hover {
transform: scale(1.2);
color: #ffadd6;
-webkit-transition: all .35s ease-out;
-moz-transition: all .35s ease-out;
-o-transition: all .35s ease-out;
-ms-transition: all .35s ease-out;
transition: all .35s ease-out;
}
/*------------------------------------------------------
ABOUT PAGE
-------------------------------------------------------*/
.about-you h2 {
font-family: 'Yrsa', serif;
font-size: 200%;
text-align: center;
padding-bottom: 2%;
}
.about-me h2 {
font-family: 'Yrsa', serif;
font-size: 200%;
text-align: center;
padding-bottom: 2%;
}
.you-text,
.me-text {
font-family: 'Roboto', sans-serif;
line-height: 175%;
}
/*------------- MODEL SLIDE --------------*/
.model-page {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
width: auto;
height: auto;
}
/*------------- APPLE SLIDE --------------*/
.apple-page {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
width: auto;
height: auto;
}
/*------------- DRIBBBLE SLIDE --------------*/
.dribbble-page {
background-color: #FF69B4;
}
.dribbble-icon {
color: white;
text-align: center;
font-size: 500%;
}
.info h3 {
color: white;
text-align: center;
font-family: 'Roboto', sans-serif;
padding-top: 7%;
}
.dribbble-button,
.github-button {
font-size: 400%;
}
.button-info {
text-align: center;
font-size: 300%;
}
/*------------------------------------------------------
BLOG PAGE
-------------------------------------------------------*/
.blog {
background: url('/img/paint.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
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> & <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>
非常感谢任何建议，谢谢！
编辑：我在第一张幻灯片中使用相同的文件路径，它可以正常工作，所以我知道路径很好。
答案 0 :(得分：2)
由于fullpage插件的运行方式，似乎不需要 fixed 属性。我建议从你的后台删除 fixed 属性。因此，您的博客类 - 在您的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;
}
或，
.blog {
background-image: url(Path_to_image);
background-repeat : no-repeat;
background-position : center center;
background-size : cover;
}
答案 1 :(得分：0)
我在jsfiddle中看到了你的代码，我认为你提到了错误的图像背景路径。
答案 2 :(得分：0)
您可能有错误的背景图片路径 - 〜尝试在第一个/之前添加'..'。
background: url('../img/paint.jpg') no-repeat center center fixed;
基本上，由于图像位于css文件夹之外的文件夹中，您需要退出css文件夹，然后进入img文件夹以获取所需的图像。