CSS背景规则

    1.背景颜色

        属性:background-color:

          取值:

           a)颜色单词:red,green,blue,purple,plum,yellow,orange

           b)#六位十六进制的颜色值: 取值:0-9A-F

                #234567  #11eedd

                第1,2代表红色取值

                第3,4代表绿色取值

               第5,6代表蓝色取值

           特点:如果每两位(每一个颜色) 取值一致的时候,可以简写

           c)rgb颜色

                    rgb(red,green,blue)

                    取值0-255 包括0包括255,多个值使用逗号隔开

                    rgb(23,34,123)

            d)rgba    颜色透明只应用于:

                    rgb上面 rgba(red,green,blue,alpha)

                  alpha==透明度  让你前面的颜色变透明

                        0-1之间的小数 包含0包含1

                           1==不透明

                           0==透明 取值保留一位小数0.1  0.2  0.3

     2.背景图片

                属性:background-image

                注意:只要你插入背景图片,必然会产生平铺(铺满/重复)

                如果你的背景图片过大的话则,只会显示一部分背景图

     3.背景平铺/背景重复

                属性:background-repeat

                  取值:

                        repeat;     重复(默认值)

                        no-repeat;  不重复,取消平铺

                        repeat-x;   水平平铺   

                        repeat-y;   垂直平铺

                 注意:取消背景平铺之后,默认背景图片再左上角显示

4.图片定位

         background-position:x y;

         数值的时候,第一值为x方向,第二个值为y方向

            x===水平位置

            x==+ 水平向右

            x==- 水平向左

            y===垂直位置

            y==+ 垂直向下

             y==- 垂直向上

                关键词额时候,xy的先后顺序没有区别

                    x和y取值还可以取值关键词

               x==left/right/center

               y==top/bottom/center

 5.背景图片尺寸大小

                属性:background-size:x y

                取值为数值的时候,第一个值x,第二值Y

                x===水平大小

                y===垂直大小

                 整体的一个关键词

                 cover:覆盖

                    等比例放大这个图片,直到铺满整个盒子为止

                    会有裁剪的效果,图片显示补全

                    contain:包含

                    等比例放大这个图片,只有横/纵有一个方向铺满停止

                    会有留白的效果,铺不满

6.背景图片固定和滚动

        属性:background-attachment

        取值:scroll滚动(默认值)

           fixed固定

        注意:只要添加了背景的固定,所有的背景图参照位置则会跑到浏览器左上角