第三课:颜色与背景

这一课将教你如何将颜色和背景色适用于网站。我们还会看到定位和控制背景图像的更先进方法。下面的CSS特性将解释:

  • color
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background

前景颜色: [color]

前景特性描述了一个元素的前景颜色。例如,假设我们想要文件中的所有标题都是深红色。标题都可以用HTML元素<h1>标示。下面的代码将<h1>元素的颜色设定为红色。

h1 {
color: #ff0000;
}

颜色既可以输入十六进制值(如#ff0000),也可以用颜色名称“red”或RGB(如255,0,0)标示。

背景颜色:[background-color]

背景颜色属性描述了元素的背景色。所有HTML文档都包含元素<body>。因此,要改变整个页面的背景色,背景颜色特性应适用于元素。

也可以将背景颜色用于包括标题和文本在内的其它元素。如下面的例子,就给<body><h1>适用了不同的背景色。

body {
background-color: #FFCC66;
}

h1 {
color: #990000;
background-color: #FC9804;
}

注意,我们通过一个分号给<h1>适用了两个特性。

背景图像[background-image]

CSS的背景图像特性可以用于插入背景图片。我们下面以蝴蝶作为背景图像实例。将图片下载到你的电脑硬盘中,或使用另一个图片均可。要把作为背景的蝴蝶图片插入一个网页,只需要施用背景图片特性给<body>,并定义图片位置即可。

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}

h1 {
color: #990000;
background-color: #FC9804;
}

注意:我们将图片位置定位为URL(”butterfly.gif”)。这意味着图片与样式表都在同一个文件夹。当然,也可以将图片设置为其它文件夹URL(如“../images/butterfly.gif”),或完整的网址URL(如”http://www.html.net/butterfly.gif”)。

重复背景图像[background-repeat]

在上面的实例中,你是否注意到默认的蝴蝶是水平和垂直重复覆盖在整个屏幕上?背景重复特性控制这一行为。下面的表单列出了不同的背景重复值。

Value Description Example
background-repeat: repeat-x 图像水平重复 Show example
background-repeat: repeat-y 图像垂直重复 Show example
background-repeat: repeat 图像水平和垂直重复 Show example
background-repeat: no-repeat 图像不重复 Show example

例如,想避免背景图片重复,可以用下面的代码:

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}

h1 {
color: #990000;
background-color: #FC9804;
}

锁定背景图像[background-attachment]

“background-attachment”特性定义了一个背景图片是固定,还是可以随包含的元素上下移动。固定背景图片不会在读者上下换行时与文本一起移动,但未锁定的图片会随网页文本一起移动
。下面表单概括了“background-attachment”的两个不同值。点击实例查看可移动和固定的区别。

Value Description Example
Background-attachment: scroll 图像随页面滑动-未锁定 Show example
Background-attachment: fixed 图像锁定 Show example

例如,下面的代码将会固定背景图片。

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
color: #990000;
background-color: #FC9804;
}

放置背景图片[background-position]

默认情况下,背景图片将会放置在屏幕左上角。特性“background-position”能让你改变这一默认,并将背景图片放在屏幕中想要的地方。设置背景位置的方法有很多。它们都是坐标系的格式。例如,‘100px 200px’这个值就是指背景图片位置从左侧起100px,并且从浏览器窗口上面起的200px。

坐标系还可以用浏览窗口的百分比,固定单元(pixels和centimetres等)标示,或直接用单词top,bottom,center,left和right标示。下面举例说明这一系统的模式。
CSS背景颜色图片

下面的表单给出一些实例:

Value Description Example
background-position: 2cm 2cm 图像位置是左起2厘米,下起2厘米 Show example
background-position: 50% 25% 图像在中心和页面下部四分之一处 Show example
background-position: top right 图像位于图像的右上角 Show example

下面代码实例将背景图片放置在右下角:

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

h1 {
color: #990000;
background-color: #FC9804;
}

综合[background]

特性background是这一课中所有background特性的综合性应用。使用background能精简许多特性,让你以简短的方式写出更容易阅读的样式表。注意下面的这五行:

background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

用background只需要一行代码就可以获得同样结果:

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

列表的顺序是:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

如果一个特性是左边起,它会被自动设置为默认值。这里我们以background-attachment与background-position为例:

background: #FFCC66 url("butterfly.gif") no-repeat;

这两个特性未指定,仅仅设置为上下拉动和顶部左侧的默认值。

概述

你从这一课学到了HTML做不到的新技术。下一课更好玩,能用CSS描述字体的同时检查可能的广度范围。