博客学堂
首页>>博客进阶>>css>> 颜色与背景(CSS入门教程二)

颜色与背景(CSS入门教程二)

来源:  | 添加时间:2007-10-5 19:07:00 |   | 我要投稿 | 提问

color

background-color

background-image

background-repeat

background-attachment

background-position

background

前景色:"color"属性

CSS属性-color,用于指定元素的前景色。

例如,假设你要让页面中的所有标题(headline)都显示为蓝色,而这些标题采用的都是 h1 元素,那么可以用下面的代码来实现把 h1 元素的前景色设为蓝色。

h1 {
 color: #0000ff;
}

注:颜色值可以用十六进制表示(比如上例中的#0000ff),也可以用颜色名称(比如“blue”)或RGB值(比如rgb(0,0,255))表示。

"background-color"属性

CSS属性-background-color,用于指定元素的背景色。

因为 body 元素包含了HTML文档的所有内容,所以,如果要改变整个页面的背景色的话,那么为 body 元素应用background-color属性就行了。

你也可以为其他包含标题或文本的元素单独应用背景色。在下例中,我们为 bodyh1 元素分别应用了不同的背景色。

body {
 background-color: #F2F5FA;
}

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

注:我们为 h1 元素应用了两个CSS属性,它们之间以分号(“;”)分隔。

背景图像"background-image"

CSS属性-background-image,用于设置背景图像。

在下面的示例中,我们使用了一张风景图片作为背景。你可以将该图片下载下来(方法为:鼠标右击该图片,然后选择“图片另存为”),以便在自己的计算机上使用。当然,你也可以选用其他你觉得满意的图片。

scenery.gif

如果要把这张风景图片作为网页的背景图像,只要在 body 元素上应用background-image属性、然后给出风景图片的存放位置就行了。

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

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

注:我们指定图片存放位置的方式:url("scenery.gif")。这表明图片文件和样式表存放在同一目录下。你也可以引用存放在其他目录的图片,只需给出存放路径即可(比如url("../images/scenery.gif"));此外,你甚至可以通过给出图片的地址来引用因特网(Internet)上的图片(比如url(http://www.blog286.com/scenery.gif))。

平铺背景图像"background-repeat"

或许你会发现有的图片在页面中被横向或纵平铺了?CSS属性-background-repeat 就是用于控制平铺的。

下表概括了 background-repeat 的四种不同取值。

background-repeat:repeat-x   图像横向平铺
background-repeat:repeat-y   图像纵向平铺
background-repeat:repeat     图像横向和纵向都平铺
background-repeat:no-repeat  图像不平铺

例如,为了避免平铺背景图像,代码应该这样:

body {
 background-color: #FFCC66;
 background-image: url("scenery.gif");
 background-repeat: no-repeat;
}
h1 {
 color: #990000;
 background-color: #FC9804;
}

 固定背景图像"background-attachment"

CSS属性-background-attachment,用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。

一个固定的背景图像不会随着用户滚动页面而发生滚动(它是固定在屏幕上的),而一个非固定的背景图像会随着页面的滚动而滚动。

下表概括了 background-attachment 的两种不同取值。

background-attachment:scroll 图像会跟随页面滚动——非固定的
background-attachment:fixed  图像是固定在屏幕上的

例如,下面的代码将背景图像固定在屏幕上。

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

放置背景图像"background-position"

缺省地,背景图像将被放在屏幕的左上角。但是,你可以通过CSS属性-background-position来修改这一缺省设置,将背景图像摆放在屏幕上你觉得满意的地方。

设置 background-position 属性的值有多种方式。不过,它们都是坐标的格式。举例来说,值“100px 200px”表示背景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。

坐标可以是以百分比或固定单位(比如像素、厘米等)作为单位的值,也可以是“top”、“bottom”、“center”、“left”和“right”这些值。下图对此进行了解释:

background-position属性 

下表给出了一些例子。

background-position:2cm 2cm 图像被放置在页面内距左边2厘米、顶部2厘米的地方
background-position:50% 25% 图像被放置在页面内水平居中、离顶部四分之一处
background-position:top right 图像被放置在页面的右上角

在下例中,背景图像被放置在页面的右下角:

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

缩写"background"

CSS属性-background是上述所有与背景有关的属性的缩写用法。

使用 background 属性可以减少属性的数目,因此令样式表更简短易读。

比如说下面五行代码:

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

如果使用 background 属性的话,实现同样的效果只需一行代码即可搞定:

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

各个值应按下列次序来写:

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

如果省略某个属性不写出来,那么将自动为它取缺省值。比如,如果去掉 background-attachment  和 background-position 的话:

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

这两个未指定值的属性将被设置为缺省值:scroll和top left。

小结:在这一课,你学会了无法用HTML替代的新技术。下一课同样是充满乐趣的,在那里我们将考察CSS在设置字体方面的各项功能。

收藏和分享:
打印】【返回顶部】【关闭

我来说两句

用户名: 新注册) 密码: 匿名评论 [所有评论]
评论内容:不能超过250字,请留下您的联系方式,方便我们回复您的留言。

网站地图 - 关于我们 - 版权声明 - 广告服务 - 联系我们 - 诚聘英才 - 帮助中心
Copyright © 2007-2008 www.blog286.com all Right Reserved
博客学堂 版权所有