CSS--背景属性（background）

通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺背景图片位置、背景图像固定等

1 背景颜色

➢ （1）属性名：background-color

background-color: 颜色值;

➢（2）属性值：
• 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
➢（3）注意点：
• 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背
景颜色

2 背景图片

➢（1）属性名：background-image

background-image: none | url

➢（2）属性值：background-image：url（图片路径）
➢（3）注意点：
• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3 背景平铺

➢（1）属性名：background-repeat

background-repeat: repeat | no-repeat | repeat-x | repeat-y

➢（2）属性值：

4 背景位置

➢（1）属性名：background-position

background-position: x y;

参数代表的意思是: x坐标和y坐标。可以使用方位名词或者精确单位
➢（2）属性值：background-position：水平位置垂直位置
➢（3）注意点：
• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

5 背景相关属性连写

➢ （1）属性名：background
➢ （2）属性值：
• 单个属性值的合写，取值之间以空格隔开
➢ （3）书写顺序：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
• 推荐：background：color image repeat position
➢ （4）省略问题：
• 可以按照需求省略
• 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()
➢ （5）注意点
• 如果需要设置单独的样式和连写
• ① 要么把单独的样式写在连写的下面
• ② 要么把单独的样式写在连写的里面

6 颜色表示方式

16进制

• 三位的十六进制；比如#F00(每个颜色由一个十六进制来表示)
• 六位的十六进制；比如#FF0000(每个颜色由两个十六进制来表示)

英文

• red （红色）
• blue（蓝色）

rgb

• rgb三原色：rgb(255,0,0)这给定的三个参数表示红，绿，蓝的颜色值，由0到225的十进制表示，rgb(100%,0%,0%)，使用百分号表示

注：以上几种表达方式都是属于RGB色系(红，绿，蓝)

rgba

和RGB一样，只是多了一个透明度，比如RGB(255,0,0,0.5)。第四个值取值范围为0-1，0是完全透明，1是完全不透明