背景样式包括:背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
| 属性 | 取值 | 作用 |
|---|---|---|
| background-color | 预定义颜色值\rgb\16进制 | 背景颜色 |
| background-image | url(图片路径) | 背景图片 |
| background-repeat | repeat/no-repeat/repeat-x/repeat-y | 是否平铺 |
| background-position | x和y坐标赋值(方位名词或精确距离) | 背景位置 |
| background-attachment | scroll\fixed | 背景附着(是否滚动) |
| 复合背景写法 | background:各种背景设置属性 | 写法更简单 |
| 背景色透明 | background:rgba(0,0,0,0.3).范围0-1 | 背景色设置半透明 |
background-color:默认的颜色是透明的–transparent,也可以手动设置其他的背景颜色。
div{background-color:green;
}
Document
background-color设置背景颜色

场景:设置logo或者一些装饰性图片。
设置背景图片和直接使用图片标签相比,有什么优点:
便于控制位置,背景图片可以铺满整个盒子
页面元素既可以添加背景颜色,也可以添加背景图片,只不过背景图片会亚洲背景颜色
div{background-image:none;//默认没有背景图片或设置背景图片background-image:url(图片路径)
}
注意:设置背景图片时,所在的容器需要有默认宽度和高度或是设置宽度和高度,不然图片会显示不出来
Document

background-repeat,取值有:
repeat(默认是平铺),no-repeat(不平铺),repeat-x(横向平铺),repeat-y(纵向平铺)
Document

Document

banckground-position属性
x\y是表示x坐标和y坐标,可以使用方位名词或精确单位
background-position:x y;
| 参数值 | 说明 |
|---|---|
| length | 百分数/由浮点数和单位标识符组成的长度值 |
| position | top,center,bottom,left,right方位名词 |

Document
成长守护平台
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
场景:做视差滚动效果
background-attachment:scroll—背景图像随对象内容滚动**(默认)**
background-attachment:fixed–背景图像固定
Document
成长守护平台
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
属性值没有顺序要求,但一般习惯约定为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background: transparent url(image.png) repeat-y fixed top
最后一个参数是alpha透明度,取值范围在0-1之间
rgba的a
只是让盒子的背景色半透明,不影响盒子内容
background:rgba(0,0,0,0.3)
Document

实现一个可以切换背景图颜色的导航栏
链接背景导航栏
效果如下:

鼠标悬浮:
