腾讯云618限量抢购
  1. HTML教程

CSS 背景 background 属性

最后更新:2010-10-07 22:17阅读:16097

CSS 背景

使用CSS的背景属性,可以让颜色或者图像作为网页元素的背景。

背景颜色

“background-color”属性用于设置背景颜色,取值为颜色。

例子:

body{ background-color: gray;}

该例子让整个页面(<body>标签)有灰色背景。

提示

该属性不可继承,默认为透明,若子元素不设置背景颜色,则显示父元素的背景颜色。实际上所有的背景属性都不能继承,只不过因为子元素默认为透明,因此在感觉上“看”起来好像是继承了背景属性。

背景图像

“background-image”属性用于设置背景图像,取值为url图像。

例子:

body{ background-image: url(../images/bg.gif); }

该例子为body标签指定背景图像,该属性的值为图像url地址,可以是绝对地址或相对地址,请注意相对地址为相对该CSS文件而言的。

运用背景颜色或图像,配合 :hover 可以制作流行的“滑动效果”。

背景重复

“background-repeat”属性用于设置背景图像的重复属性,可能的取值如下:

取值 说明
repeat 默认值,背景图像在纵向和横向上平铺
no-repeat 背景图像不平铺
repeat-x 背景图像仅在横向上平铺
repeat-y 背景图像仅在纵向上平铺

例子:

body{
    background-image: url(../images/bg.gif);
    background-repeat: no-repeat;
}

默认情况下,背景图像将从应用背景图像元素的左上角开始,如果需要改变开始方式,则需要应用背景定位属性。

背景定位

“background-position”属性用于设置背景颜色,其语法为:

background-position: 数值 数值background-position: 上下方位 左右方位

数值取值为由浮点数字和单位标识符组成的长度值或百分比,默认为0%。

方位取值为 top|center|bottom||left|center|right,分别代表 上|中|下||左|中|右。

例子:

body{ 
    background-image: url(../images/bg.gif); 
    background-position: top right;
}

该例子让整个页面以images目录下的bg.gif为背景,并定位于右上角。

说明

  • 设定背景图像位置,必须先设定 background-image 属性。
  • 如果只指定了一个值,该值将用于横坐标,纵坐标将默认为 50% 或 center 。如果指定了两个值,第二个值将用于纵坐标。
  • top|bottom 应用于左右方位将被当作上下方位,反之亦如此

背景关联

“background-attachment”属性用于设置背景关联,即设置背景图像是随对象内容滚动还是固定的。其可能取值如下:

取值 说明
scroll 默认值,背景图像是随对象内容滚动
fixed 背景图像固定

例子:

body { 
    background-image: url(../images/bg.gif); 
    background-repeat: no-repeat;
    background-attachment: fixed;
}

该例子让整个页面(<body>标签)有灰色背景。

复合属性

背景属性为复合属性,即上面的属性可以一起写为:

background: 值1 值2 值3……

body{ background: url(../images/bg.gif) no-repeat top right; }

每个值之间用空格隔开,实际上除了背景颜色之外,其他的属性,通常都是用复合属性的,如前面学习的font属性也为复合属性。

通常,复合属性后面用“-”连接子属性关键字就构成了子属性。

腾讯云618限量抢购