我一辈子都搞不明白为什么我的背景不能改变颜色或图像。当我的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;
}型
3条答案
按热度按时间pkwftd7m1#
问题可能是您正在使用的插件的CSS覆盖了main.css中的CSS。从Slidebars Github页面：
字符串
正如您所看到的，
#sb-site（测试内容所在的位置）的默认背景色是白色。您可以将main.css文件中#sb-site的CSS更改为蓝色来解决问题。浏览器优先考虑更具体的CSS规则，id
#sb-site比body标签更具体。jogvjijk2#
只要把你所有的body内容放在一个wrapper-div里面。然后将 Package 的背景颜色设置为您想要的颜色。
6qftjkof3#
使用时！important可以强制应用你的样式，但它通常被认为是最后的手段，因为它会导致特殊性问题，使你的CSS更难维护。尽量避免使用！重要的，如果可能的话。
字符串