CSS背景属性

可以设置纯色作为背景，也可以使用图像作为背景。

CSS 背景属性（Background）
序号	属性	描述
1	background-color	设置元素的背景颜色。
2	background-image	设置元素的背景图像。
3	background-repeat	设置是否重复背景图像或如何重复背景图像。
4	background-position	设置背景图像的开始位置。
5	background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。
6	background	设置背景的所有属性。


								1.CSS background-color 属性

用于设置对象的背景色。

取值

值	描述
color_name	颜色值为颜色名称的背景颜色（如 red等）。
hex_number	颜色值为十六进制值的背景颜色（如 #ff0000）。
rgb_number	颜色值为 rgb 代码的背景颜色（如 rgb(255,0,0)）。
inherit	从父元素继承 background-color 属性的设置。

实例

设置部分文字以及段落的背景色

<body style="background-color:Gray;">
<p>jQuery已经成为<span style="background-color:rgb(255,0,0)");>JavaScript</span>事实上的代名词，很大程度上是因为其可扩展性，易用性以及在项目管理方面可控。随着用于平板电脑和智能手机等设备的触屏优化技术的演进，以及与此相关的web框架的发展，

<span
									style="background-color:#0000FF;">

jQuery Mobile将成为跨平台</span>，支持多设备的手机应用的非常重要的技术选择之一。</p>
<p style="background-color:Fuchsia;">越来越多的开发者开始考虑使用HTML 5技术来开发移动应用，建立一个稳定的易用性好的<span style="background-color:transparent;">JavaScript框架</span>将成为移动技术开发人员的重要选择。jQuery Mobile具备成为这一框架的事实上的基础。（因jQuery目前的应用范围相当广泛和普遍）</p>
</body>


								2.CSS background-image 属性

background-image 设置背景图像。

元素的背景占据元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认情况背景图像位于元素的左上角，并在水平和垂直方向上重复。

实例

设置背景图像，若背景图像较小则背景图像在水平和垂直方向上重复：

<body>
<div

style="background-image:url(../../../Images/bgimageli.gif); height:150px;
									width:800px;"

>
</div>
</body>


								3.CSS background-repeat 属性

background-repeat 属性设置是否及如何重复背景图像。

取值

值	描述
repeat	默认。背景图像在垂直方向和水平方向重复。
repeat-x	背景图像在水平方向重复。
repeat-y	背景图像在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

实例

设置背景图像的显示方式：


								4.CSS background-position 属性

background-position 属性设置背景图像的起始位置。

取值

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果仅设置了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。可以混合使用 % 和 position 值。

值

描述

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果仅设置了一个关键词，那么第二个值将是"center"。

默认值：0% 0%。

x% y%

第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值，另一个值将是 50%。

xpos ypos

第一个值是水平位置，第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果仅规定了一个值，另一个值将是50%。

可以混合使用 % 和 position 值。

实例

在页面中如何定位背景图像：

<body>
    <div style="border:1px solid #F00;background-image:url(../../../Images/bgimageli.gif);background-repeat:no-repeat;background-position:center;height:150px; width:800px;">
    </div>
    <div style="border:1px solid #0F0;background-image:url(../../../Images/bgimageli.gif);background-repeat:no-repeat;

background-position:60%
									30%;

height:150px; width:800px;">
</div>
<div style="border:1px solid #00F;background-image:url(../../../Images/bgimageli.gif);background-repeat:no-repeat;

background-position:150px
									30px;

height:150px; width:800px;">
</div>
</body>


								5.CSS background-attachment 属性

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

取值

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

实例

设置固定的背景图像以及图像不会随着页面的其他部分滚动两个实例：

<body>
    <div style="background-image:url(../../../Images/bgattachment.gif);background-repeat:no-repeat;background-attachment:scroll;width:600px;height:398px;">
       <p>淮阴工学院为江苏省属普通本科院校，坐落于敬爱的周恩来总理故乡、全国历史文化名城——江苏省淮安市。学校始建于1958年，2000年升格为本科高校，2011年9月，获批国家教育部卓越工程师教育培养计划高校，2011年10月，经国务院学位委员会批准，学校成为培养硕士专业学位研究生试点单位。</p>
    </div>
    <div style="background-image:url(../../../Images/bgattachment.gif);background-repeat:no-repeat;background-attachment:fixed;width:600px;height:398px;">
       <p>淮阴工学院为江苏省属普通本科院校，坐落于敬爱的周恩来总理故乡、全国历史文化名城——江苏省淮安市。学校始建于1958年，2000年升格为本科高校，2011年9月，获批国家教育部卓越工程师教育培养计划高校，2011年10月，经国务院学位委员会批准，学校成为培养硕士专业学位研究生试点单位。</p>
    </div>
</body>


								6.CSS background 属性

background 属性是简写属性，一次性设置针对背景的属性。

可以按顺序设置如下属性：background-color、background-image、background-repeat、background-attachment、background-position

实例

在一个声明中设置所有背景属性：

<body>
<div

style="background:#039F00 url(../../../Images/index_logo.gif) no-repeat
									scroll center;width:600px;height:398px;"

>
<p>淮阴工学院为江苏省属普通本科院校，坐落于敬爱的周恩来总理故乡、全国历史文化名城——江苏省淮安市。学校始建于1958年，2000年升格为本科高校，2011年9月，获批国家教育部卓越工程师教育培养计划高校，2011年10月，经国务院学位委员会批准，学校成为培养硕士专业学位研究生试点单位。</p>
</div>
</body>