CSS背景色可以用来为网页添加色彩,让网页更加丰富有趣。有时候你可能想要让背景色覆盖整个屏幕,这时候我们可以使用以下代码:
html, body { height: 100%; } body { background-color: #fff; margin: 0; padding: 0; }
上面的代码中,首先将html和body的高度都设置为100%,这样就可以使整个页面被填满。然后将body的背景色设置为白色,这里你可以根据自己的需要更改。最后将body的margin和padding都设置为0,这样就可以让背景色完全覆盖整个屏幕了。
另外,如果你想让背景色能够适应不同的屏幕尺寸,可以使用以下代码:
html, body { height: 100%; } body { background-color: #fff; margin: 0; padding: 0; display: flex; flex-direction: column; } main { flex-grow: 1; }
在上面的代码中,我们使用了flex布局。将body的display属性设置为flex,并将其flex-direction属性设置为column,表示子元素竖直排列。然后再添加一个main元素,并将其flex-grow属性设置为1,让其占据剩余的空间。这样就可以让背景色自动适应不同的屏幕尺寸了。