css的背景

一.css的背景：

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

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

3.1背景颜色

样式名称：

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

使用方式：

background-color；颜色值；

其他说明：

元素背景颜色默认值是transparent（透明）

background-color：transparent；

3.2背景图片

样式名称：

background-color定义元素的背景图片；

使用方式：

样式名称：
background-image：none|url(url);

参数值	作用
none	无背景图（默认值）
url	使用绝对或相对地址指定背景图像

其他说明

实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）。

注意：背景图片后面的地址,千万不要忘记加URL，同时里面的路径不要加引号。

3.3背景平铺

样式名称

backgroung-repeat设置元素背景图像的平铺

使用方式

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向平铺
repeat-y	背景图像在纵向平铺

3.4 背景图片位置

样式名称

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

使用方式

background-position:x,y;

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

参数值	说明
length	百分数/由浮点数字和单位识符组成的长度
position	top/center/bottom/left/right方位3名词

其他说明
1、参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left 效果一致如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2、参数是精确单位
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
3、参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

3.5背景图片固定（背景附着）

样式名称

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

background-attachment：scroll/fixed

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

其他说明：

background-attachment后期可以制作视差滚动的效果。

3.6背景样式合写法

背景合写样式

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

background:transparent url(img.ipg)  repeat-x  fixed top;

3.7背景色半透明

css3提供了背景颜色半透明的效果。

使用方式

background：rgba(0,0,0.3);

最后一个参数是alpha透明度，取值范围在0~1之间
我们习惯把0.3的0省略掉，写为background:raba(0,0,0.3);

注意

背景半透明是指盒子背景半透明，盒子里面的内容不受影响
css3新增属性，是IE9+版本浏览器才支持的，但是现在实际开发，我们不太关注兼容性写法了，可以放心使用

3.8背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat \|no-repeat\|repeat-x\|repeat-y
background-position	背景位置	length\|position分别是x和y坐标
background-attachment	背景附着	scroll（背景滚动）/fixed（背景固定）
背景简单	书写更简单	背景颜色背景图片地址背景平铺背景滚动背景位置
背景颜色半透明	背景颜色半透明	backgroung:rgba(0,0,0.3);后面必须是四个值