background和background-image都是CSS中设置元素背景的属性,但它们有不同的用法和语法。
background属性可以同时设置背景颜色、图片、平铺、位置等属性。其语法如下:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]
例如:
div{ background: #f2f2f2 url(bg.jpg) no-repeat center top fixed; }
这里,我们将背景颜色设置为#f2f2f2,背景图片为bg.jpg,设置平铺为不平铺,位置为距离顶部居中,固定在页面上。
background-image属性仅用于设置背景图片,没有设置颜色、位置等其他属性。其语法如下:
background-image: url('bg.jpg');
例如:
div{ background-image: url('bg.jpg'); }
这里,我们只设置了背景图片为bg.jpg,没有设置其他属性。
需要注意的是,两种属性可以结合使用,例如:
div{ background: #f2f2f2 url(bg.jpg) no-repeat center top fixed; background-image: url('bg2.jpg'); }
这里,我们先用background设置了背景颜色、图片、平铺、位置等属性,然后用background-image属性又设置了一张背景图片。此时,背景颜色等属性以background的为主,而背景图片则以background-image的为主。