css的背景

1.背景颜色

background-color: 颜色值；

2.背景图片

常用于logo，装饰性图片,便于控制位置

background-image : url(地址)；

 /* 不要忘记url（） */

            background: url(666.jpg);

3.背景平铺

平铺：一个图片非常小，装它的盒子比它大，但要装满它，就采用背景平铺，将图片重复展示

 /* 1.背景图片不平铺 */

            background-repeat: no-repeat;

            /* 2.默认的背景图片是平铺的 */

            background-repeat: repeat;

            /* 3.沿着x轴平铺 */

            background-repeat: repeat-x;

            /* 4.沿着y轴平铺 */

            background-repeat: repeat-y;

            background-color: pink;

            /* 页面元素既可以添加背景元素也可以添加背景图片，只不过背景图片会压住背景颜色 */

4.背景图片位置

background-position:x y;

一.参数x,y均是方位名词

1./* background-position: 方位名词 */

            background-position: center top;

 如果是方位名词 center right和right center的效果是等价的 跟顺序没有关系 

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

            background-position:  center center;//代表图片在正中间

二.参数是精确单位

第一个参数表示一定是x轴，第二个一定是y轴

只指定了一个值，那一定是x轴的值，y轴则默认是center

三.参数是混合单位

第一个参数表示一定是x轴，第二个一定是y轴

background-position: 20px center ;

              /* 一定是x是20px，y轴是center  */

              background-position: center 20px;

              /* 一定是x是center，y轴是20px  */

5.背景固定（背景附着）

background-attachment : scorll//背景图像随着对象内容滚动

background-attachment : fixed//背景图像固定

6.背景复合写法

没有特定顺序，一般习惯为：

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

7.背景色半透明

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

前3个是正常表示颜色的值，最后一个参数alpha表示透明度，取值范围在0-1之间

可以把0.3中的0省略

越接近0颜色越深，越接近1颜色越浅

注意：背景半透明是指盒子背景半透明，盒子里的内容不受影响（文字）