查看“Css3 pr background”的源代码

{{DISPLAYTITLE:background}}[[Category:css animatable|1]]
= CSS background 属性 =

在一个div元素中设置多个背景图像（并指定他们的位置）：

<sample title="" desc="" lang="html" hererun="1">
body
{
    background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
 </sample>
<run name=""> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程(xiaobai.wang)</title>
<style>
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
</style>
</head>

<body>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</body>

</html> </run>
== 浏览器支持 ==

表格中的数字表示支持该属性的第一个浏览器版本号。

{| class="table table-striped table-hover"
! 属性
! Chrome
! Internet Explorer / Edge
! Firefox
! Safari
! Opera
|-
| background
| 1.0
| 4.0
| 1.0
| 1.0
| 3.5
|}

所有主流浏览器都支持 background 属性。

'''注意'''：IE8和更早版本不支持一个元素多个背景图像。

'''注意'''：IE7和更早的版本不支持&quot;继承&quot;的值。 IE8 需要定义 '''！DOCTYPE'''。 IE9支持&quot;继承&quot;。

== 标签定义及使用说明 ==

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 '''background：＃FF0000 URL（smiley.gif);''' 是允许的。

{| class="table table-striped table-hover"
| 默认值:
| 请参阅单独的属性
|-
| 继承:
| no
|-
| 版本:
| CSS1+ CSS3中的新的属性
|-
| JavaScript 语法:
| object object.style.background=&quot;red url(smiley.gif) top left no-repeat&quot;
|}

== 语法 ==

<sample title="" desc="" lang="html" hererun="1">
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
 </sample>
{| class="table table-striped table-hover"
! 值
! 说明
! CSS
|-
| [[pr background color|background-color]]
| 指定要使用的背景颜色
| 1
|-
| [[pr background position|background-position]]
| 指定背景图像的位置
| 1
|-
| [[css3 pr background size|background-size]]
| 指定背景图片的大小
| 3
|-
| [[pr background repeat|background-repeat]]
| 指定如何重复背景图像
| 1
|-
| [[css3 pr background origin|background-origin]]
| 指定背景图像的定位区域
| 3
|-
| [[css3 pr background clip|background-clip]]
| 指定背景图像的绘画区域
| 3
|-
| [[pr background attachment|background-attachment]]
| 设置背景图像是否固定或者随着页面的其余部分滚动。
| 1
|-
| [[pr background image|background-image]]
| 指定要使用的一个或多个背景图像
| 1
|}

== 相关文章 ==

CSS 教程: [[css background|CSS 背景]]

CSS3 教程: [[css3 backgrounds|CSS3 背景]]