关于CSS background
CSS背景属性
| 值 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color
background-color 属性定义了元素的背景颜色，页面的背景颜色使用在body的选择器中。
常用颜色代码：
1、常用颜色单词，比如green（绿色），yellow（黄色），red（红色），transparent（透明色）等；
2、以#号开头的六个字符组成的颜色代码，比如：#FF0000（红色），#000000（黑色），#F9F900（黄色）等；
3、颜色rgb值，表达方式：rgb(参数1，参数2，参数3)，如：“rgb(255,0,0)”，三个参数分别表示r，g，b
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
如：
<!DOCTYPE html>
<html>
<head>
<style>
h1{
background-color:#6495ed;
}
p{
background-color:#e0ffff;
}
div{
background-color:#ffff00;
}
</style>
</head>
<body>
<h1>Test</h1>
<div>
div
<p>color</p>
div
</div>
</body>
</html>
效果：
background-image
background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
属性的值
| 值 | 描述 |
|---|---|
| url(‘URL’) | 图像的URL |
| none | 无图像背景会显示。这是默认 |
| linear-gradient() | 创建一个线性渐变的 “图像”(从上到下) |
| radial-gradient() | 用径向渐变创建 “图像”。 (center to edges) |
| repeating-linear-gradient() | 创建重复的线性渐变 “图像” |
| repeating-radial-gradient() | 创建重复的径向渐变 “图像” |
| inherit | 指定背景图像应该从父元素继承 |
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
body
{
background-image:url('paper.gif');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
效果：
background-position
background-position 属性设置背景图像的起始位置。这个属性设置背景原图像的位置，背景图像如果要重复，将从这一点开始。
属性值
| 值 | 描述 |
|---|---|
 | 如果仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另一个值将是 50%。 |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。可以混合使用 % 和 position 值。 |
如：
body
{
background-image:url('/1.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
效果:
