background的属性值

单一属性

1)背景颜色

            background-color:  red;

取值跟英文单词，rgb，或者16进制色值

2)背景图片 只要你插入背景图片就产生平铺效果 

            background-image: url(../img/pic.png);

3)取消平铺 ===只剩下一个图片,这个图片在左上角显示呢 

            背景平铺:其他取值: 四个取值

              repeat  repeat-x  repeat-y  no-repeat

              background-repeat: repeat-y;

4)背景的位置

              background-position:x y；

        关键词取值: x===left/right/center

                            y===top/bottom/center

5)背景图片尺寸大小

                background-size:x y；

x,y可以取px数值，也可以使用关键词

                cover===覆盖      直接等比例放大这个背景图片,会铺满这个盒子容器===会有裁剪问题

                contain==包含      直接等比例反打这个背景推按,只要有一个边铺满就可以了==出现留白效果

6)背景附着

                background-attachment: fixed;

        背景滚动和固定

             如果添加了背景固定的话,背景图片参照位置是浏览器窗口的左上角为参照

             使用背景固定还会巧妙的实现一个效果

                    视觉的切换,视觉差效果

复合属性

                background:color image repeat x y/x y attachment；

        1)x y / x y

            /前面代表的事:位置(position)

             /后面代表的事:size(size)

             如果不调整大小的话直接一个x y; 后面的大小可以不跟

              如果你只需要调整大小的话,前面的位置必须跟;要想把size大小复合进来就必须带位置===如果不跟位置的话,只有大小,自动识别成位置

                2)其他的属性值的位置是可以更换的

                    image repeat x y/x y attachment color

                3)复合属性中可以跟一个值也可以跟多个值