35、CSS进阶——画布背景

画布的背景

首先，看一个现象。

对于一个没有body元素子元素的html文档，添加样式

body{
	background: #008c8c;
}

对于没有设置尺寸样式的body元素，其display值默认为block；width默认为auto，吸收剩余空间，因此其宽度应该撑满整个页面。而height默认为0，且body内部没有内容，因此其高度应该为0。设置其背景颜色，本来应该覆盖body元素的边框盒（这点由background-clip属性的默认值决定的）。但是，实际情况如下。

body设置的背景颜色实际上却填充满了页面。

如果我们给body元素设置确切的宽高

body{
    background: #008c8c;
    width: 100px;
    height: 100px;
    border: 2px dashed;
}

显示效果如下

可以看出，body的背景颜色依然反常的越出body的边框盒。

但是，如果此时给body元素的父元素html设置background，反常的背景覆盖转而让html承担，body元素的背景颜色覆盖恢复正常。

html{
    background: lightblue;
}
body{
    background: #008c8c;
    width: 100px;
    height: 100px;
    border: 2px dashed;
}

画布

画布（canvas），一块区域。这块区域有以下特点：

1. 最小宽度为视口宽度
2. 最小高度为视口高度

这里的canvas只是指一种区域，不是html5中的<canvas>元素。

HTML元素的背景

• 覆盖画布

body元素的背景

• 如果html元素有背景，body元素正常（背景覆盖边框盒）

• 如果html元素没有背景，body元素的背景覆盖画布

主要针对背景颜色和背景图的设置。

html/body元素的背景如此设置，便于整个网页背景的设置，避免设置背景的宽度/高度不够。

关于画布（html/body）背景图

1. 画布背景图的宽度百分比，相对于视口；

body{
    width: 2000px;
    height: 100px;
    background: url("img/main_bg.jpg") no-repeat;
    background-size: 100%;
    border: 2px solid #f40;
}

2. 画布背景图的高度百分比，相对于网页（html元素）高度；

body{
    width: 200px;
    height: 400px;
    background: url("img/main_bg.jpg") no-repeat;
    background-size: 100% 100%;
    border: 2px solid #f40;
}

3. 画布背景图的横向位置百分比、预设值，相对于视口；

body{
    width: 2000px;
    height: 400px;
    background: url("img/main_bg.jpg") no-repeat;
    background-size: 50%;
    background-position: center bottom;
    border: 2px solid #f40;
}

4. 画布背景图的纵向位置百分比、预设值，相对于网页高度。

body{
    width: 2000px;
    height: 400px;
    margin-top: 100px;
    margin-left: 200px;
    background: url("img/main_bg.jpg") no-repeat;
    background-size: 50%;
    background-position: center center;
    border: 2px solid #f40;
}

画布背景在横向始终处于中间位置，纵向位于html元素的中间位置。