css背景属性详解（背景图片铺满全屏的简写）

背景图片铺满全屏，记得加个斜杠 

background: url() no-repeat center / cover

 

属性详解： 

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

background:red url(img/bg.png) no-repeat fixed center top

番外：background-position的值

①值如果是方位名词，则两个值前后顺序无关，比如right center和center right 效果是等价的；

    如果只指定了一个方位名词，另一个值省略，则第二个值默认为center

/*background-position:cener right;*/
background-position:right center;

②值如果是精确单位，则第一个一定是x坐标，第二个一定是y坐标

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

background-position:20px 50px;

③ 值如果是混合单位，则第一个一定是x坐标，第二个一定是y坐标

background-position:20px center;

  一、背景色
        属性：background-color
        取值：
            任意合法颜色值
            transparent
        注意：
            背景颜色会填充到元素的内容区域，内边距区域以及边框区域
    二、背景图像
        属性：background-image
        取值：url(图像url)
        ex:background-image:url(a.jpg);
    三、背景平铺
        属性：background-repeat
        取值：
            1、repeat
                默认值，垂直和水平方向都平铺
            2、repeat-x
                横向平铺
            3、repeat-y
                纵向平铺
            4、no-repeat
                不平铺，仅显示一次
    四、背景图片尺寸
        属性:background-size
        取值:
            1、value1 value2
                具体数值，value1表示背景图像的宽度，value2表示背景图像的高度
            2、value1% value2%
                以元素的尺寸占比决定背景图的尺寸
            3、cover
                覆盖
                把背景图扩展至足够的大(等比缩放)，直到背景图像完全覆盖到元素区域位置
            4、contain
                包含
                将背景图像等比缩放，直到右边或下边碰到元素边缘为止
    五、背景图片固定
        属性：background-attachment
        取值：
            1、scroll
                滚动,默认值
            2、fixed
                固定，将背景图保持在可视化区域内，不随着滚动条而发生变化
    六、背景图片位置
        属性：background-position
        取值：
            1、x y
                x ：背景图像水平偏移位置
                    取值为正，向右移动
                    取值为负，向左移动
                y ：背景图像垂直偏移位置
                    取值为正，向下偏移
                    取值为负，向上偏移
            2、x% y%
            3、
                x:left/center/right 替代
                y:top/center/bottom 替代

        CSS Sprites
            将若干幅小图像拼合到一副大图像中，想看具体小图像的时候，配合着背景图已经背景图像位置的方式进行移动，显示

            1、根据要看的图像，创建一个元素,该元素大小要与要看的图像大小一致。
            2、通过 背景图像以及背景图像位置 移动背景图到 显示的元素中
    七、背景属性-简写属性
        background:color url() repeat attachment position;

        注意：属性值可以省略，省略的话将采用默认值

        background:red;