4.4 背景

设定背景颜色和图片，可以是整个页面的（设置在body），也可以是某个元素。
例如，下面的css将让整个页面的背景变成灰色：
body{
    background:#ccc;
}
也可以直接写上各种颜色的英文，例如red，blue，yellow，背景也可以用在大部分的元素上，例如：
<div style="background:red">
    红色背景
</div>
除了颜色，还可以设置背景的图片，其中abc.png图片要和这个css所处同一个文件夹：
body {
    background: url("abc.png");
}

图片也可以是网络上的图片,height:196px代表高度设置成196像素。
<div style="height:196px;background:url('https://www.codessp.cn/images/codessp.png');">
    测试一下,我的背景是图片哦
</div>
图片默认是横向和纵向重复的，如果不想重复，在最后加上no-repeat就可以了，如下所示：
<div style="height:196px;background:url('https://www.codessp.cn/images/codessp.png') no-repeat; ">
    测试一下,我的背景是图片哦
</div>
此外，还可以设置图片仅在横向重复：
<style>
div.test{
    height:596px;
    background:url('https://www.codessp.cn/images/codessp.png')repeat-x;
}
</style>
<div class="test">
    测试
</div>

同理，下面是仅在纵向重复：
<style>
div.test{
    height:596px;
    background:url('https://www.codessp.cn/images/codessp.png')repeat-y;
}
</style>
<div class="test">
    测试
</div>

下面这个则是图片居中，两个center是左右和上下的居中：
<style>
div.test{
    height:596px;
    background:url('https://www.codessp.cn/images/codessp.png')no-repeat center center;
}
</style>
<div class="test">
    测试
</div>