CSS背景
CSS可以使用背景属性设置背景颜色，背景图片，背景平铺，背景图片位置，背景图固定等。
背景颜色
background-color属性可以定义任意元素的背景颜色。 默认值是transparent(透明)。
示例代码：
<head>
<meta charset="UTF-8">
<title>表单</title>
<style>
div{
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div>
</div>
</body>
背景图片
background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的图片的使用，也可以用于设定大的背景图片。
示例代码：
<head>
<meta charset="UTF-8">
<title>表单</title>
<style>
div{
width: 500px;
height: 500px;
background-image: url("imag_l.jpg");
}
</style>
</head>
<body>
<div>
</div>
</body>
背景平铺
如果需要设置背景图片是否平铺，可以通过background-repeat属性来设置，有四个参数
| 参数 | 作用 |
|---|---|
| repeat | 背景图片平铺 |
| no-repeat | 背景图片不平铺 |
| repeat-x | 沿着x轴方向平铺 |
| repeat-y | 沿着y轴方向平铺 |
示例代码：
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
div{
width:700px;
height: 300px;
/*平铺*/
background-image: url("imag-1.png");
background-repeat: repeat;
}
</style>
</head>
<body>
<div>
</div>
</body>
背景位置方向名词
利用background-position属性来修改图片在背景中的位置
语法格式：
background-position： x y ;
| 参数值 | 说明 |
|---|---|
| length | 可以是百分数，或者是浮点数字和单位标识符组成的长度值 |
| position | 可以设置的属性有 top center bottom left right 方位名词 |
示例代码:
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
div{
width:700px;
height: 300px;
background-color: aqua;
/*平铺*/
background-image: url("imag-1.png");
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<div>
</div>
</body>
指定的两个值都是方位名词，并且于顺序没有关系
可以只指定一个方位名词，第二个值默认为居中对齐。
参数可以是精确坐标，一个是x坐标，一个是y坐标。 y坐标可以省略，默认居中对齐。
background-position: 15px 20px;
参数也可以是混合单位。background-position: 15px center;
背景图像固定，图像附着
即将某张图片固定在页面中，不随着滚动而滚动。
background-attachment 属性可以用于设置背景图像是否固定在页面中的某个位置或者随着页面其余部分而滚动。
| 参数 | 作用 |
|---|---|
| scroll | 背景图片是随对象内容滚动 |
| fixed | 背景图像固定 |
示例代码：
background-attachment: fixed;
背景属性复合写法
为了节约代码量，可以将背景属性写在同一句代码里。
当使用简写属性时,没有特定的书写顺序,一般习便约定顺序为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
示例代码：
background: aqua url("imag-1.png") no-repeat fixed center top;
背景色半透明
CSS可以设置背景颜色半透明的效果
语法格式：
background：rgba(0,0,0,0.3);
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
div{
width:700px;
height: 300px;
/*background: aqua url("imag-1.png") no-repeat fixed center top;*/
background: rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
