javascript更换背景

background设置多个属性时，不能设置background-size的属性，需要单独设置。

使用js更改background属性值的时候，尽量使用明确的属性值，例如backgroundImage，不使用background，因为如果原来的css中background设置了多个属性，js修改的时候没有写全，未在js中写的属性就会变回默认属性。如果在原css中设置了background-size属性，在js通过background修改部分属性后background-size也会变回默认值。而通过background。是不能修改background-size属性的。

原CSS样式

[html]  view plain  copy

1. background: url('../../images/bflogin/bei.jpg') no-repeat 0 center;  
2. -webkit-background-size:cover;  
3. background-size:cover;  

js更换背景后

1使用background

[html] view plain copy

1. document.getElementsByClassName('main-top')[0].style.background = "url('" + image_list[i] + " ') no-repeat 0 center"  ;  

2.使用backgroundImage

[html] view plain copy

1. document.getElementsByClassName('main-top')[0].style.backgroundImage = "url('" + image_list[i] + " ') ";  

background的五个参数

background : background-color || background-image || background-repeat || background-attachment || background-position 

W3C中的手册说可以 background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

• background-color
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
• background-image

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

background-clip属性当背景是图片的时候，border-box和padding-box 效果相同（chrome下）。