CSS backgound 属性

/基本属性/
/*
background-color：背景色
background-image：背景图片
background-size：背景图片尺寸
background-repeat：背景图片重复(repeat,repeat-x,repeat-y,no-repeat)
background-position：背景图片位置
background-attachment：背景图片是否固定不动
background-clip：背景覆盖区
background-origin：背景图片覆盖区
*/

    /*常用属性*/
    /*
    background-color：背景色
    background-image：背景图片
    background-repeat：背景图片重复
    background-position：背景图片位置
    */

    /*
    background-color
    1.颜色名称，如，background-color:red;
    2.十六进制颜色，如，background-color:#fdefde;
    3.rgb,如果是rgba，a则表示为透明度，0为不显示，1为全显示。如，background-color:rgb(0,255,0),或者，background-color:rgba(0,0,255,0.6);
    4.transparent,透明，如，background-color:transparent;
    */

    /*
    background-image
    1.url,图片地址，可以放置多个地址，如，background-image:url(),url();
    2.none,不设置图片背景
    */

    /*
    background-repeat
    1.repeat,图片在x方向还有y方向上面重复，如，background-repeat:repeat;
    2.repeat-x,图像在x方向重复，如，background-repeat:repeat-x;
    3.repeat-y,图像在y方向重复，如，background-repeat:repeat-y;
    4.no-repeat,图像不重复
    */

    /*
    background-position
    1.位置名字组合定位，只写一个的情况表示另一个为center，如，background-postion:right top;或，background-position:center;
    2.百分比位置，如，background-position:20% 20%;
    3.具体像素位置，如，background-position:20px 20px;
    */

    /*  
    background-attachment
    1.sroll,默认
    2.fixed，页面滚动，图片不动
    */

    /*
    background-size
    1.像素大小，只写一个，另一个默认为auto，如，background-size:200px 20px;
    2.百分比大小，如，background-size:20% 20%;
    3.cover,背景图像覆盖当前元素所有背景区域，如，background-size:cover;
    4.contain,图像显示最大且刚好完全显示，一般不能覆盖所有区域，如，background-size:contain;
    */

    /*
    background-clip
    1.border-box,背景覆盖到边框区域，如，background-clip:border-box;
    2.padding-box,背景覆盖到padding区域，如，background-clip:padding-box;
    3.content-box,背景仅覆盖content区域，如，background-clip:content-box;
    */

    /*
    background-origin
    1.border-box,背景图像的起始位置在边框外，如，background-origin:border-box;
    2.padding-box,背景图像的起始位置从padding开始，如，background-origin:padding-box;
    3.content-box,背景图像的起始位置从conten开始，如，background-box:content-box;
    */

/原生js获取css样式方式共有两种/
/第一种/
/获取行内样式/
/dom.style.attr/

    /*如果元素样式并非行间样式，利用上面这种方法并不能获取到元素的样式，需要使用另一种方法*/

    /*第二种*/
    /*非行间样式获取*/
    /*window.getComputedStyle(div,null).width;*/
    /*修改样式代码*/
    /* div.style.cssText='width:300px;'*/
    /*弊端：删除原有的样式*/
    /*setProperty(propertyName,value,priority)，可以更正*/