理想情况下，<div id="main">宽度应为 560 像素，高度为 100%，背景颜色为 #333333。
然而，事实并非如此。简而言之，就像刷新页面后一样，我可以看到背景颜色在那里，但一旦页面加载完成，它就会消失。这让我觉得我的 CSS 中某处存在冲突，我只是不确定在哪里。我如何获得 <div id="main">有背景吗？这是我正在处理的内容:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Parlour</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<header>
<nav>
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">GET IN TOUCH</a></li>
</ul>
</nav>
</header>
<div id="logo">
<a href="#"><img src="img/parlour_side.png" alt="Parlour Salon logo" /></a>
</div><!-- end logo -->
<div id="main">
<div class="brief">
<h2><a href="#"><span>ABOUT PARLOUR</span></a></h2>
<p>Parlour is blah blah blah.</p>
</div><!-- end brief -->
<div class="brief">
<h2><a href="#"><span>SERVICES</span></a></h2>
<p>Parlour offers blah blah blah.</p>
</div><!-- end brief -->
<div class="brief">
<h2><a href="#"><span>PRODUCTS</span></a></h2>
<p>At Parlour, we believe blah blah blah.</p>
</div><!-- end brief -->
<div class="brief">
<h2><a href="#"><span>GET IN TOUCH</span></a></h2>
<p>1522 U Street NW<br/>Washington DC<br/>202-986-0080</p>
<div class="social">
<a href="#"><img src="img/facebook.png" alt="Parlour Facebook" /></a>
<a href="#"><img src="img/twitter.png" alt="Parlour Twitter" /></a>
<a href="#"><img src="img/youtube.png" alt="Parlour YouTube" /></a>
<a href="#"><img src="img/yelp.png" alt="Parlour Yelp" /></a>
</div><!-- end social -->
</div><!-- end brief -->
</div><!-- end main -->
</div><!-- end container -->
</body>
CSS
/* Reset */
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li
fieldset, form, label {
background: url(img/background.jpg) no-repeat center center fixed;
background-size: cover;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {
background: url('img/background.jpg');
font-family: nevis-webfont;
color: #ffffff;
}
ol, ul {
list-style-type: none;
}
/* Type */
@font-face {
font-family: nevis-webfont;
src: url('type/nevis-webfont.eot');
src: url('type/nevis-webfont.eot?#iefix') format('embedded-opentype'),
url('type/nevis-webfont.woff') format('woff'),
url('type/nevis-webfont.ttf') format('truetype'),
url('type/nevis-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: Didot, "Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif;
font-size: 125%;
font-weight: normal;
letter-spacing: 1px;
line-height: 1.5;
text-transform: uppercase;
}
h2 {
font-family: Didot, "Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif;
font-size: 125%;
font-weight: normal;
line-height: 1.5;
}
h3 {
font-family: nevis-webfont;
font-size: 75%;
font-weight: normal;
letter-spacing: 1px;
line-height: 1.5;
text-transform: uppercase;
}
p {
font-family: nevis-webfont;
font-size: 75%;
line-height: 1.5;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Basic */
#container {
width: 100%;
}
#logo {
float: left;
margin-left: 100px;
margin-top: 200px;
}
/* Header */
nav {
background: #333333;
height: 35px;
width: 100%;
}
nav ul {
background: #333333;
margin-left: 220px;
padding-bottom: 5px;
padding-top: 5px;
}
nav ul li {
background: #333333;
display: inline;
}
nav ul li a {
background: #333333;
color: #ffffff;
font-family: nevis-webfont;
font-size: 75%;
letter-spacing: 1px;
text-decoration: none;
margin: 0 16px;
}
/* Main */
#main {
background-color: #333333;
height: 100%;
width: 560px;
margin-left: 230px;
margin-top: 200px;
overflow: hidden;
}
#main .brief h2 span {
color: #ffffff;
text-decoration: none;
}
JSFiddle虽然这不是我所看到的，所以这里是本地站点的屏幕截图..
最佳答案
您的 CSS 重置不正确。 CSS 重置应该只用于删除所选元素的一些默认样式，但您还应用了只想添加到 HTML 的背景图像(而不是每个 div 等)。只需从 CSS 中删除背景属性并将其移动为仅使用您的 HTML，您就可以开始了。
html { background: url(img/background.jpg) no-repeat center center fixed;
background-size: cover; }
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li
fieldset, form, label {
/* Other reset properties */
}
关于html - div的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11916396/