CSS的背景

一、背景颜色

样式名称：background-color

使用：

background-color:颜色值；

 注意：背景颜色默认值为transparent(透明)。

二、背景图片

样式名称：background-image

使用：

background-image : none ;
background-image : url(url);

 

注意：背景图片的路径不要加引号 

三、背景平铺

样式名称：background-repeat 

使用：

background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

 

四、背景图片位置

样式名称：background-position 

使用：

background-position: x y;

 x 代表 x 坐标，y 代表 y 坐标。可以使用方位名词或者精确值表示。

 注意：

1、若参数是方位名词

​       如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left  top 和 top  left 效果一致

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

2、若参数是精确单位

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

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

3、参数是混合单位

​       如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

五、背景图片固定

样式名称: background-attachment 

详解：用于设置背景图片固定或者随着页面的前其余部分滚动。

使用：

background-attachment: scroll;
background-attachment: fixed;

 

六、背景样式简写

样式：

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

使用：

background: transparent url(image.jpg) no-repeat fixed top;

七、背景色半透明

使用：

background: rgba(0, 0, 0, 0.4);

 注意：

• 最后一个参数是 alpha 透明度，取值范围为 0~1。
• 可以简写最后一个参数为 “ . 4 ”。

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