我不能为我的生活弄清楚为什么我的背景无法改变颜色或图像。当我的css中的所有内容看起来都正确时，我看不出是什么阻止了背景颜色的显示。
HTML ：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META -->
<meta charset="UTF-8">
<title>Boots2</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Slidebar -->
<link href="css/slidebars.min.css" type="text/css" rel="stylesheet">
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Slidebar -->
<link href="css/slidebar-theme.css" type="text/css" rel="stylesheet">
<link href="css/main.css" type="text/css" rel="stylesheet">
<script src="js/respond.js"></script>
</head>
<body>
<!-- Navbar -->
<div class="sb-navbar navbar-fixed-top navbar-inverse sb-slide" role="navigation">
<!-- Left Control -->
<div class="sb-toggle-left navbar-left">
<div class="navicon-line"></div>
<div class="navicon-line"></div>
<div class="navicon-line"></div>
</div>
<div class="container">
<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>
<a class="navbar-brand" href="#">Boots2</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>
<a href="#">Separated link</a>
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
<li>
<a id="top-arrow" href="#top">^</a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
<!-- Site -->
<div id="sb-site">
<div class="container">
<h1>Test Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, quas delectus aut ipsum tenetur repudiandae fugiat consequuntur modi incidunt quisquam impedit et architecto laboriosam ratione doloribus sit illum maxime at?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, magnam, corrupti, tenetur eum sapiente voluptas necessitatibus tempora velit assumenda veritatis beatae dolorem eos hic voluptatibus cum repellat amet optio officia?</p>
</div>
<!-- end container -->
</div>
<!-- end sb-site -->
<!-- Slidebar -->
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul class="sb-menu">
<li>
<img src="#">
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Download</a>
</li>
<li>
<a href="#">Usage</a>
</li>
<li>
<a href="#">API</a>
</li>
<li>
<a href="#">Compatibility</a>
</li>
<li>
<a href="#" class="sb-toggle-submenu">
Help & Issues
<span class="sb-caret"></span>
</a>
<ul class="sb-submenu">
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Fixed Positions</a>
</li>
<li>
<a href="#">Modal.js</a>
</li>
<li>
<a href="#">Squashed Navbar Content</a>
</li>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a class="#">Github</a>
</li>
<li>
<small>Site © 2014 Max Campos</small>
</li>
</ul>
</nav>
</div>
<!-- end Slidebar -->
<!-- Scripts -->
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Slidebars -->
<script src="js/slidebars.min.js"></script>
<script>
(function ($) {
$(document).ready(function () {
// Initiate Slidebars
$.slidebars();
// Slidebars Submenus
$('.sb-toggle-submenu').off('click').on('click', function () {
$submenu = $(this).parent().children('.sb-submenu');
$(this).add($submenu).toggleClass('sb-submenu-active');
// Toggle active class.
if ($submenu.hasClass('sb-submenu-active')) {
$submenu.slideDown(200);
}
else {
$submenu.slideUp(200);
}
});
});
}) (jQuery);
</script>
</body>
</html>
CSS ：
body {
background-color: blue;
padding-top: 70px;
width: 100%;
font-family: Helvetica, Verdana, arial, sans-serif;
}
.theme-dropdown .dropdown-menu {
position: static;
display: block;
margin-bottom: 20px;
color: #f2f2f2;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}
#top-arrow {
padding-top: 17px;
padding-bottom: 13px;
}
答案 0 :(得分：1)
问题可能是你正在使用的插件的CSS在main.css中占用了你的CSS。来自Slidebars Github页面：
#sb-site, .sb-site-container {
/* You may now use class .sb-site-container instead of #sb-site and use your own id. However please make sure you don't set any of the following styles any differently on your id. */
width: 100%;
position: relative;
z-index: 1; /* Site sits above Slidebars */
background-color: #ffffff; /* Default background colour, overwrite this with your own css. I suggest moving your html or body background styling here. Making this transparent will allow the Slidebars beneath to be visible. */
}
如您所见，#sb-site（测试内容所在的位置）的默认背景颜色为白色。您可以将main.css文件中#sb-site的CSS更改为蓝色以解决问题。
浏览器优先选择更具体的CSS规则，ID #sb-site比body标签更具体。
答案 1 :(得分：0)
将所有正文内容放入包装器div中。然后将包装器的背景颜色设置为您想要的颜色。