CSS背景及其背景图片的设置

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。

1、背景颜色

background-color属性定义元素背景颜色。

background-color: 颜色值;

一般情况下默认值为透明transparent(透明)，我们也可以手动设置透明色。

2、背景图片

background-image属性定义背景图片。一般用于logo，装饰性图片，超大的背景图，便与控制位置。

background-image：url();

3、背景平铺

background-repeat属性定义背景平铺。

属性值	作用
repeat	平铺（默认）
no-repeat	不平铺
repeat-x	沿着X轴横向平铺
repeat-y	沿着Y轴纵向平铺

4、背景图片的位置

background-pasition属性控制图片在背景中的位置。

x,y代表横纵坐标。可以使用方位名词或者精确单位。
background-pasition:x,y;

4.1、参数为方位名词

• 如果指定的两个值为方位名词，则两个前后顺序无关。

• 如果指定一个名词，另一个省略则第二个默认为居中。

4.2、参数是精确单位

• x坐标，y坐标

• 如果只指定一个数值，那么该数值一定是x坐标，另一个是默认垂直居中。

4.3、使用混合单位

• 如果使用混合单位，那么第一个一定是X坐标。具有顺序关系。

5、背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment:scroll / fixed;

属性值	效果
scroll	背景图像随页面内容滚动（默认）
fixed	背景图像固定，不随页面滚动。

5、背景属性简写

• 简化代码的书写量

• background顺序：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

• 各个属性之间用空格隔开

6、背景颜色半透明

CSS3为我们提供了背景颜色半透明的效果

background：rgba（0，0，0，0.3）;

• 最后一个参数时alpha透明度，取值范围0~1之间

• 背景半透明是指盒子的背景半透明，盒子里面的内容不受影响

7、总结

背景图片在世界的开发中常见于logo或者一些装饰性的小图片或者超大的背景图片，便于控制背景图片的位置。