div的背景顏色

理想情況下，<div id="main">的寬度應爲560px，高度爲100％，背景色爲＃333333。但是，事實並非如此。簡而言之，就像在刷新頁面之後，我可以看到背景顏色存在，但是一旦頁面加載完成，它就消失了。這讓我覺得我的CSS中存在衝突，我只是不確定在哪裏。我如何獲得<div id="main">有背景？這裏就是我的工作：div的背景顏色

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雖然這是不太我所看到的，所以這裏的本地站點的屏幕帽..

來源

2012-08-11 AMC

您的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 */ 
}

Here's the Fiddle (another background image used).

來源

2012-08-11 18:34:00 MarcoK

感謝您的建議，這絕對是一步步接近我要找的。我怎樣才能讓'＃main'的高度從頁面頂部延伸到底部，100％？ – AMC 2012-08-11 18:44:31

這實際上是一個不同的問題，[但你在這裏]（http://jsfiddle.net/dA2EY/3/）。 #main刪除了邊距，並添加了填充。 – MarcoK 2012-08-12 19:14:39

再次感謝您的幫助。 – AMC 2012-08-15 15:52:06

div的背景顏色

回答

相關問題