CSS背景

CSS背景

一.背景颜色 background-color

设置背景颜色：

background-color: < color name>

background-color: rgb(xxx, xxx, xxx);

background-color: #xxxxxx;

二.背景图片 background-image

1.设置背景图片

background-image: url(相对路径)

2.设置图片的开始位置 background-position

A.使用top，right，bottom，left，center确定开始位置

例:background-position: left top;(默认，从左上角开始)

background-position 可以只给一个值，第二个值默认为center

B.使用百分比确定位置

background-position: 0% 0%;（默认，表示左上角开始）

0% 0%表示左上角，100% 100%表示右下角，第一个值表示水平方向，第二个值表示竖直方向。

 

C.使用数值确定位置

background-position: 0px 0px (默认，表示左上角开始)

 

数值和百分比可以同时使用

3.图片的大小大于元素的大小

A.默认情况只会显示图片的左上部分

B.通过background-position改变显示的部分

4.图片的大小小于元素的大小

A.默认会重复平铺图片（水平方向和竖直方向），并且会充满整个背景，即使某些重复的图片会显示不全。

B.通过background-repeat来确定是否重复平铺或者怎样重复

background-repeat: repeat 默认值，两个方向平铺
background-repeat: no-repeat 不重复平铺 background-repeat: repeat-x 水平方向平铺
background-repeat: repeat-y 竖直方向平铺

5.背景图片不随着滚动条而移动（固定在页面某个位置）

background-attachment: scroll 默认值
background-attachment: fixed 类似于固定定位，固定在页面的某个位置

三.通过background设置所有样式

background可以设置所有关于背景的样式，只要将这些样式用空格隔开写在background属性后就可以。

没有顺序要求，没有数量要求（也就是说，不用全写）没有写的属性会采用默认值

例子:
background-color : #bfa;

background : url(1.png) center;

最终，背景颜色是白色的，因为在解析background属性时，没有写背景颜色，默认为白色，所以将#bfa覆盖。