我试图让我的标题页上出现一个背景图片，它不会加载只是想知道是否有人可以帮助我解决它会显示有时图像与css文件在同一目录中，所以不是吗所有在同一个包含文件请帮助我！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- TITLE OF SITE -->
<title>themelock.com - Web Service | GetLeads - Landing Page with Page Builder</title>
<meta name="description" content="Multipurpose Landing Page with Page Builder - Web Service/Software/Startup Landing Page" />
<meta name="keywords" content="getleads, html theme, web service landing page, web service theme, web service template, software theme, startup theme, startup landing page, startup template, html landing page, one page, responsive landing page" />
<meta name="author" content="Themedept">
<!-- FAVICON -->
<!-- Place your favicon.ico in the images directory -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!-- =========================
STYLESHEETS
============================== -->
<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" href="css/plugins/bootstrap.min.css">
<!-- FONT ICONS -->
<link rel="stylesheet" href="css/icons/iconfont.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- PLUGINS STYLESHEET -->
<link href="css/creative.css" rel="stylesheet">
<link rel="stylesheet" href="css/plugins/magnific-popup.css">
<link rel="stylesheet" href="css/plugins/owl.carousel.css">
<link rel="stylesheet" href="css/plugins/loaders.css">
<link rel="stylesheet" href="css/plugins/animate.css">
<link rel="stylesheet" href="css/plugins/pickadate-default.css">
<link rel="stylesheet" href="css/plugins/pickadate-default.date.css">
<!-- CUSTOM STYLESHEET -->
<link rel="stylesheet" href="css/style.css">
<!-- RESPONSIVE FIXES -->
<link rel="stylesheet" href="css/responsive.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#main-navbar">
<!-- Preloader -->
<div class="loader bg-dark">
<div class="loader-inner ball-scale-ripple-multiple vh-center">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="main-container" id="page">
<!-- =========================
HEADER
============================== -->
<header id="nav2-3">
<nav class="navbar navbar-fixed-top" id="main-navbar">
<div class="container">
<!-- Menu Button for Mobile Devices -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Image Logo -->
<!-- note:
recommended sizes
width: 150px;
height: 35px;
-->
<a href="" class="navbar-brand smooth-scroll"><img src="images/logo-black.png" alt="logo" /></a>
</div><!-- /End Navbar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<!-- Menu Links -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#video4-1" class="smooth-scroll">About</a></li>
<li><a href="#features10-1" class="smooth-scroll">Features</a></li>
<li><a href="#pricing3-1" class="smooth-scroll">Pricing</a></li>
<!-- Dropdown Menu -->
<li class="dropdown">
<a id="dLabel" data-toggle="dropdown" data-target="#" href="#">
Extra Pages <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu">
<li><a href="../extra-pages/blog-list.html">Blog List</a></li>
<li><a href="../extra-pages/blog-single.html">Blog Single</a></li>
<li><a href="../extra-pages/faq.html">Faq</a></li>
<li><a href="../extra-pages/terms.html">Terms</a></li>
<li><a href="../extra-pages/login.html">Login Page</a></li>
<li><a href="../extra-pages/signup.html">Signup Page</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Other Demos</a>
<ul class="dropdown-menu">
<li><a href="../2-consulting/index.html">Consulting</a></li>
<li><a href="../1-agency/index.html">Agency</a></li>
<li><a href="../5-app/index.html">App</a></li>
<li><a href="../4-elearning/index.html">E-Learning</a></li>
<li><a href="../6-medical/index.html">Medical</a></li>
<li><a href="../7-woodworking/index.html">Wood Working</a></li>
<li><a href="../9-event/index.html">Event</a></li>
<li><a href="../8-yoga/index.html">Yoga</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="" class="btn-nav btn-grey btn-login">Login</a></li>
<li><a href="#subscription5-1" class="btn-nav btn-green btn-signup smooth-scroll">Free Trial</a></li>
</ul><!-- /End Menu Links -->
</div><!-- /End Navbar Collapse -->
</div><!-- /End Container -->
</nav><!-- /End Navbar -->
</header>
<!-- /End Header Section -->
<div class="header-container">
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Your Favorite Source of Free Bootstrap Themes</h1>
<hr>
<p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
<a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
</div>
</div>
</div>
<!-- =========================
FOOTER
============================== -->
<footer id="footer6-2" class="footer f6 p-y-md bg-edit bg-dark">
<div class="container text-white inverse">
<div class="row">
<!-- Footer Logo and Text -->
<div class="col-md-6">
<img src="images/logo-white.png" alt="">
<p class="m-t">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<div class="footer-social social-btn m-t-md">
<a href="#" class="sb-white"><i class="fa fa-facebook text-black"></i></a>
<a href="#" class="sb-white"><i class="fa fa-google-plus text-black"></i></a>
<a href="#" class="sb-white"><i class="fa fa-twitter text-black"></i></a>
<a href="#" class="sb-white"><i class="fa fa-instagram text-black"></i></a>
</div>
</div>
<!-- Footer Links -->
<div class="col-md-2">
<p><strong>Section Footer 1</strong></p>
<ul class="footer-links m-t">
<li class="m-b"><a href="#" class="edit">Press</a></li>
<li class="m-b"><a href="#" class="edit">Terms of service</a></li>
<li class="m-b"><a href="#" class="edit">About</a></li>
<li class="m-b"><a href="#" class="edit">Contact</a></li>
</ul>
</div>
<!-- Footer Links -->
<div class="col-md-2">
<p><strong>Section Footer 2</strong></p>
<ul class="footer-links m-t">
<li class="m-b"><a href="#" class="edit">Other Link</a></li>
<li class="m-b"><a href="#" class="edit">Awesome Link</a></li>
<li class="m-b"><a href="#" class="edit">Link Wonderful</a></li>
<li class="m-b"><a href="#" class="edit">Gorgeous Link</a></li>
</ul>
</div>
<!-- Footer Links -->
<div class="col-md-2">
<p><strong>Section Footer 3</strong></p>
<ul class="footer-links m-t">
<li class="m-b"><a href="#" class="edit">Link Lovely</a></li>
<li class="m-b"><a href="#" class="edit">Other Link</a></li>
<li class="m-b"><a href="#" class="edit">Pretty Link</a></li>
<li class="m-b"><a href="#" class="edit">Link Smart</a></li>
</ul>
</div>
</div><!-- /End Row-->
</div><!-- /End Container-->
</footer><!-- /End Footer -->
</div><!-- /End Main Conteiner -->
<!-- Back to Top Button -->
<a href="#" class="top" style="background-color:#525e6c;">Top</a>
<!-- =========================
SCRIPTS
============================== -->
<script src="js/plugins/jquery1.11.2.min.js"></script>
<script src="js/plugins/bootstrap.min.js"></script>
<script src="js/plugins/jquery.easing.1.3.min.js"></script>
<script src="js/plugins/jquery.countTo.js"></script>
<script src="js/plugins/jquery.formchimp.min.js"></script>
<script src="js/plugins/jquery.jCounter-0.1.4.js"></script>
<script src="js/plugins/jquery.magnific-popup.min.js"></script>
<script src="js/plugins/jquery.vide.min.js"></script>
<script src="js/plugins/owl.carousel.min.js"></script>
<script src="js/plugins/spectragram.min.js"></script>
<script src="js/plugins/twitterFetcher_min.js"></script>
<script src="js/plugins/wow.min.js"></script>
<script src="js/plugins/picker.js"></script>
<script src="js/plugins/picker.date.js"></script>
<!-- Custom Script -->
<script src="js/custom.js"></script>
</body>
</html>
这是css
/*!
* Start Bootstrap - Creative v3.3.7+1 (http://startbootstrap.com/template-overviews/creative)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
html,
body {
height: 100%;
width: 100%;
}
body {
font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
}
hr {
border-color: #F05F40;
border-width: 3px;
max-width: 50px;
}
hr.light {
border-color: white;
}
a {
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
color: #F05F40;
}
a:hover,
a:focus {
color: #eb3812;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.bg-primary {
background-color: #F05F40;
}
.bg-dark {
background-color: #222222;
color: white;
}
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
section {
padding: 100px 0;
}
aside {
padding: 50px 0;
}
.no-padding {
padding: 0;
}
.navbar-default {
background-color: white;
border-color: rgba(34, 34, 34, 0.05);
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
}
.navbar-default .navbar-header .navbar-brand {
color: #F05F40;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default .navbar-header .navbar-toggle {
font-weight: 700;
font-size: 12px;
color: #222222;
text-transform: uppercase;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: #222222;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: #F05F40;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
color: #F05F40 !important;
background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
background-color: transparent;
}
@media (min-width: 768px) {
.navbar-default {
background-color: transparent;
border-color: rgba(255, 255, 255, 0.3);
}
.navbar-default .navbar-header .navbar-brand {
color: rgba(255, 255, 255, 0.7);
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: white;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
color: rgba(255, 255, 255, 0.7);
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: white;
}
.navbar-default.affix {
background-color: white;
border-color: rgba(34, 34, 34, 0.05);
}
.navbar-default.affix .navbar-header .navbar-brand {
color: #F05F40;
font-size: 14px;
}
.navbar-default.affix .navbar-header .navbar-brand:hover,
.navbar-default.affix .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default.affix .nav > li > a,
.navbar-default.affix .nav > li > a:focus {
color: #222222;
}
.navbar-default.affix .nav > li > a:hover,
.navbar-default.affix .nav > li > a:focus:hover {
color: #F05F40;
}
}
.header-container {
position: relative;
width: 100%;
min-height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
background-image: url('/splash/images/header.jpg');
text-align: center;
color: white;
}
.hr-1 {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #ffffff;
}
.header-container .header-content {
position: relative;
text-align: center;
padding: 100px 15px 100px;
width: 100%;
}
.header-container .header-content .header-content-inner h1 {
font-weight: 700;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
font-size: 30px;
}
.header-container .header-content .header-content-inner hr {
margin: 30px auto;
}
header .header-content .header-content-inner p {
font-weight: 300;
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
margin-bottom: 50px;
}
@media (min-width: 768px) {
header {
min-height: 100%;
}
header .header-content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding: 0 50px;
}
header .header-content .header-content-inner {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
header .header-content .header-content-inner h1 {
font-size: 50px;
}
header .header-content .header-content-inner p {
font-size: 18px;
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
}
.section-heading {
margin-top: 0;
}
.service-box {
max-width: 400px;
margin: 50px auto 0;
}
@media (min-width: 992px) {
.service-box {
margin: 20px auto 0;
}
}
.service-box p {
margin-bottom: 0;
}
.portfolio-box {
position: relative;
display: block;
max-width: 650px;
margin: 0 auto;
}
.portfolio-box .portfolio-box-caption {
color: white;
opacity: 0;
display: block;
background: rgba(240, 95, 64, 0.9);
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 100%;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
padding: 0 15px;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
font-size: 18px;
}
.portfolio-box:hover .portfolio-box-caption {
opacity: 1;
}
.portfolio-box:focus {
outline: none;
}
@media (min-width: 768px) {
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
font-size: 16px;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
font-size: 22px;
}
}
.call-to-action h2 {
margin: 0 auto 20px;
}
.text-primary {
color: #F05F40;
}
.no-gutter > [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.btn-default {
color: #222222;
background-color: white;
border-color: white;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
color: #222222;
background-color: #f2f2f2;
border-color: #ededed;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
background-color: white;
border-color: white;
}
.btn-default .badge {
color: white;
background-color: #222222;
}
.btn-primary {
color: white;
background-color: #F05F40;
border-color: #F05F40;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
color: white;
background-color: #ee4b28;
border-color: #ed431f;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #F05F40;
border-color: #F05F40;
}
.btn-primary .badge {
color: #F05F40;
background-color: white;
}
.btn {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
border: none;
border-radius: 300px;
font-weight: 700;
text-transform: uppercase;
}
.btn-xl {
padding: 15px 30px;
}
::-moz-selection {
color: white;
text-shadow: none;
background: #222222;
}
::selection {
color: white;
text-shadow: none;
background: #222222;
}
img::selection {
color: white;
background: transparent;
}
img::-moz-selection {
color: white;
background: transparent;
}
body {
webkit-tap-highlight-color: #222222;
}
答案 0 :(得分：1)
您写道：“图像与css文件在同一目录中”
但在CSS中，背景图片的网址是：url('/splash/images/header.jpg');
我认为这就是出错的地方。