background · CSS基础

## background属性背景缩写属性可以在一个声明中设置所有的背景属性。可以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image. 如果上述值缺少一个，这不要紧，例如background：＃FF0000 URL（smiley.gif）;是允许的。 JavaScript 语法:object object.style.background="red url(smiley.gif) top left no-repeat" * * * ## 语法 ``` background:bg-colorbg-imageposition/bg-sizebg-repeatbg-originbg-clipbg-attachmentinitial|inherit; ``` | 值 | 说明 | CSS | | :-- | :-- | :-- | | *[background-color](https://www.w3cschool.cn/cssref/pr-background-color.html)* | 指定要使用的背景颜色 | 1 | | *[background-position](https://www.w3cschool.cn/cssref/pr-background-position.html)* | 指定背景图像的位置 | 1 | | *[background-size](https://www.w3cschool.cn/cssref/css3-pr-background-size.html)* | 指定背景图片的大小 | 3 | | *[background-repeat](https://www.w3cschool.cn/cssref/pr-background-repeat.html)* | 指定如何重复背景图像 | 1 | | *[background-origin](https://www.w3cschool.cn/cssref/css3-pr-background-origin.html)* | 指定背景图像的定位区域 | 3 | | *[background-clip](https://www.w3cschool.cn/cssref/css3-pr-background-clip.html)* | 指定背景图像的绘画区域 | 3 | | *[background-attachment](https://www.w3cschool.cn/cssref/pr-background-attachment.html)* | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 | | *[background-image](https://www.w3cschool.cn/cssref/pr-background-image.html)* | 指定要使用的一个或多个背景图像 | 1 | ## 实例--在一个div元素中设置多个背景图像（并指定他们的位置）： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> body { background: #00ff00 url('/statics/images/course/smiley.gif') no-repeat fixed center; } </style> </head> <body> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text </body> </html> ```