编辑“CSS背景”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[CSS学习教程#CSS学习教程|上一页]] | {{template:开发语言导航}}</span>
<div style="clear:both;"></div>

==background==
语法： <br>
[[background]] : background-color || background-image || background-repeat || background-attachment || background-position <br>
取值：<br>
该属性是复合属性。请参阅各参数对应的属性。<br>
默认值为：transparent none repeat scroll 0% 0%。 <br>

说明：<br>
设置对象的背景样式。<br>
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。<br>
例如：设置 background : white 等于设置 background : white none repeat scroll 0% 0% 。如果在此之前设置了 background-image 属性，则其设置将被 background-image 的默认值 none 覆盖。<br>
背景样式属性的作用区域为对象的内容区域与内补丁( padding )区域。不包括边框( border )与外补丁( margin )区域。尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。<br>
对应的脚本特性为 background 。 <br>
示例：<br>
div { background: red no-repeat scroll 5% 60%; } <br>
body { background: url("images/aardvark.gif") repeat-y; } <br>
pre { background: url("images/aardvark.gif") top; } <br>
caption { background: fuchsia; } <br>

==background-attachment==
语法：background-attachment : scroll | fixed  <br>
取值：<br>
scroll  :　 默认值。背景图像是随对象内容滚动 <br>
fixed  :　 背景图像固定 <br>

说明：<br>
设置或检索背景图像是随对象内容滚动还是固定的。<br>
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。<br>
请参阅 bgProperties 属性(特性)。对应的脚本特性为 backgroundAttachment 。 <br>
示例：<br>
html { background-image: url("anasazi.tif"); background-attachment: fixed; } <br>
body { background-attachment: scroll; } <br>

==background-color==
语法：background-color : transparent | color  <br>
取值：<br>
transparent  :　 默认值。背景色透明 <br>
color  :　 指定颜色。请参阅 颜色单位 和 附录：颜色表  <br>

说明：<br>
设置或检索对象的背景颜色。<br>
当背景颜色与背景图像( background-image )都被设定了时，背景图片将覆盖于背景颜色之上。<br>
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。<br>
对应的脚本特性为 backgroundColor 。 <br>
示例：
<br>p { background-color: silver }<br>
div { background-color: rgb(223,71,177) } <br>
body { background-color: #98AB6F }<br>
pre { background-color: transparent; } <br>

==background-image==
语法：background-image : none | url ( url )  <br>
取值：<br>
none  :　 默认值。无背景图 <br>
url ( url )  :　 使用绝对或相对 url 地址指定背景图像 <br>

说明：<br>
设置或检索对象的背景图像。<br>
当背景图像与背景颜色( background-color )都被设定了时，背景图片将覆盖于背景颜色之上。<br>
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。<br>
对应的脚本特性为 backgroundImage 。 <br>
示例：<br>
code { background-image: url("comet.jpg"); }<br>
blockquote { background-image: url("c:\InetPub\MyPixs\comet.jpg"); } <br>
body { background-image: none; } <br>

==background-position==
语法： <br>
background-position : length || length <br>
background-position : position || position <br>
取值：<br>
length  :　 百分数 | 由浮点数字和单位标识符组成的长度值。<br>
position  :　 top | center | bottom | left | center | right <br>

说明：<br>
设置或检索对象的背景图像位置。必须先指定 background-image 属性。<br>
该属性定位不受对象的补丁属性( padding )设置影响。<br>
默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。<br>
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。<br>
如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。<br>
对应的脚本特性为 backgroundPosition 。 <br>
示例：<br>
div { background: url("images/aardvark.gif"); background-position: 35% 80%; } <br>
menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; } <br>
a { background: url("images/aardvark.gif"); background-position: 3.25in; } <br>
body { background: url("images/aardvark.gif"); background-position: top right; } <br>
==background-position-x==
语法:background-position-x : length | left | center | right <br>
取值：<br>
length:百分数 | 由浮点数字和单位标识符组成的长度值。  <br>
left:居左 <br>
center:居中 <br>
right:居右 <br>

说明：<br>
设置或检索对象的背景图像横坐标位置。必须先指定 background-image 属性。<br>
该属性定位不受对象的补丁属性( padding )设置影响。<br>
默认值为： 0% 。<br>
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。<br>
对应的脚本特性为 backgroundPositionX 。 <br>
示例：<br>
p { background-image: url("images/aardvark.gif"); background-position-x: 35%; background-repeat:no-repeat; }<br>
== background-position-y==
语法：background-position-y : length | top | center|bottom  <br>
取值：<br>
length  :　 百分数 | 由浮点数字和单位标识符组成的长度值。<br>
top  :　 居顶 <br>
center  :　 居中 <br>
bottom  :　 居底 <br>

说明：<br>
设置或检索对象的背景图像纵坐标位置。必须先指定 background-image 属性。<br>
该属性定位不受对象的补丁属性( padding )设置影响。<br>
默认值为： 0% 。<br>
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。<br>
对应的脚本特性为 backgroundPositionY 。 <br>
示例：<br>
div { background-image: url("images/aardvark.gif"); background-position-y: 35%; background-repeat:no-repeat; } <br>

==background-repeat==
语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y  <br>
取值：<br>
repeat  :　 默认值。背景图像在纵向和横向上平铺 <br>
no-repeat  :　 背景图像不平铺 <br>
repeat-x  :　 背景图像仅在横向上平铺 <br>
repeat-y  :　 背景图像仅在纵向上平铺 <br>

说明：<br>
设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。<br>
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。<br>
对应的脚本特性为 backgroundRepeat 。 <br>
示例：<br>
menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; } <br>
p { background: url("images/aardvark.gif"); background-repeat: no-repeat; } <br>

==layer-background-color==
语法：layer-background-color : transparent | color  <br>
取值：<br>
transparent  :　 默认值。背景色透明 <br>
color  :　 指定颜色。请参阅 颜色单位 和 附录：颜色表  <br>

说明：<br>
设置或检索对象整个区域的背景颜色。<br> 
示例：<br>
div { layer-background-color: transparent; } <br>
==layer-background-image==
语法： <br>
layer-background-image : none | url ( url ) <br>
取值：<br>
none  :　 默认值。无背景图 
<br>url ( url )  :　 使用绝对或相对 url 地址指定背景图像 <br>

说明：<br>
设置或检索对象整个区域的背景图像。<br> 
示例：
<br>code { position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; background-image: url("comet.jpg"); layer-background-image: url("bb_comet.jpg"); } <br>

[[category:CSS学习教程]]