Question

我试图设置body元素的背景。我已经改变了body的宽度，我希望背景能够适应这个宽度，而是填满整个屏幕。我该如何解决？

＆＃13;

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

＆＃13;

Answer 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;
}

了解html，body和background-color之间的关系。

所有元素的初始background-color为transparent。

如果未指定background-color元素的html（即transparent），则根据CSS规则，浏览器会为其提供background-color body元素。

来自规范：

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

对于其根元素是HTML HTML元素或XHTML的文档   html元素：如果background-image的计算值为   根元素为none，其background-color为transparent，   用户代理必须传播计算的值   该元素的第一个HTML BODY或XHTML的背景属性   body子元素。 BODY元素的使用值   background属性是它们的初始值，并且是传播的   将值视为在根元素上指定的值。它   建议HTML文档的作者指定画布   BODY元素的背景而不是HTML元素。

更改body元素的背景颜色和宽度

1 个答案: