2016-02-14 63 views
1

我試圖設置body元素的背景。我已經改變了寬度body,我希望背景適合這個寬度,但是它會填滿整個屏幕。我將如何解決它?更改正文元素的背景顏色和寬度

body { 
 
border: 1px solid black; 
 
width: 500px; 
 
margin: 0 auto; 
 
background: black; 
 
}

+0

參見[應用的背景和/或](http://stackoverflow.com/questions/10947541/applying-a-background-to-html-and-or-body)和[寬度小於它的背景](http://stackoverflow.com/questions/11083984/html-width-is-less-than-its-background) – BoltClock

回答

1

你實際上是在做,除非當你不聲明背景顏色html元素,它則採取body元素的背景顏色。因此,你沒有看到差異。

只需得到html元件不同的背景顏色,也給body一些height

html { 
 
    background-color: red;  /* new */ 
 
} 
 

 
body { 
 
    border: 1px solid black; 
 
    width: 500px; 
 
    height: 500px;    /* new */ 
 
    margin: 0 auto; 
 
    background: black; 
 
}


理解htmlbodybackground-color和之間的關係。

所有元素的初始background-colortransparent

如果未指定html元件的background-color是(即,transparent)然後,在CSS規則,瀏覽器給它body元件的background-color

從規格:

3.11.2. The Canvas Background and the HTML <body> Element

對於文檔根元素是HTML HTML元件或XHTML html元件:如果background-image的 根元素所計算的值是none及其background-colortransparent, 用戶代理必須改爲傳播計算出的的值來自該元素的第一個HTML元素的背景屬性BODY或XHTML body子元素。使用的BODY元素的 背景屬性的值是它們的初始值,並且傳播的值被視爲在根元素上指定的值。建議使用 ,HTML文檔的作者指定BODY元素的背景爲 ,而不是HTML元素。

+0

啊。我懂了。所以HTML模仿身體的背景,當沒有聲明自己的時候。我從來不知道這一點。; P – frosty

+0

雖然你在這裏,但是,你知道是否有一種方法可以將CSS應用於除了身體之外的所有元素? – frosty

+0

我更新了關於'html'和'background-color'的更多細節。 –