CSS背景样式：给背景页面添加样式，什么是background-attac，background-image，background-repeat，background-position

1.背景颜色

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

background-color:颜色值;

默认情况下元素的背景颜色默认是transparent(透明)，我们可以手动设置。

颜色值：可以是英文单词，也可以是rgb或者十六进制

2.背景图片

background-image属性描述了元素的背景图片，经常用于logo或者一些超大背景图。

background-image:none |url(url)

 

参数值	作用
none	没有背景图（默认）
url	使用绝对或者相对路径指定的图片

3.背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

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

 

 

 

参数值	作用
repeat	横向纵向平铺
no-repeat	不平铺
repeat-x	沿x轴平铺
repeat-y	沿y轴平铺

4.背景图片位置

利用background-position属性可以改变图片在背景中的位置

background-position:x y;

 参数代表的意思是:x坐标和y坐标，可以使用方位名词或者精确单位

参数值	说明
length	百分数或者由浮点数和单位表示符组成的长度值
position	top        |        center        |        bottom        |        left         |        right 方位词

1.参数是方位名词

        如果指定的两个值都是方位名词，两者的先后顺序没有影响，比如left top 和top left 效果一样。

        如果只指定了一个方位名词，另一个省略，则另一个默认居中对齐。

2.参数是精确是精确单位

        如果参数值是精确坐标，那么第一个值是x坐标，第二个是y坐标。

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

3.参数是混合单位

        如果指定的两个值是精确单位和方位从的混合，第一个值是x坐标，第二个值是y坐标。

5.背景图像固定

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

        

background-attachment:scroll | fixed

参数	作用
scroll	背景图片随着对象内容滚动
fixed	背景图像固定

6.背景的复合写法

为了简化代码，可以将背景属性简写在同一个属性background中。

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

7.背景色半透明

background:rgba(0,0,0,0.3)

1.前三个0代表红绿蓝，最后一个参数代表透明度 aplha，取值范围是0~1之间，0表示完全透明，1表示完全显示

2.注意：背景半透明是指盒子的背景半透明，内容不受影响。