color and background
introduction
这篇文章是讲述如何在网站上应用颜色和背景,还会介绍用于定位和控制背景图像的高级方法。下面将对下列CSS属性进行讲解:
- color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- backgound
color
CSS color属性用于指定元素的前景色。
例如,你想让页面中所有的标题都为深红色,我们可以用以下代码实现:
h1,h2,h3,h4,h5,h6{
color:red;
}
注意:颜色值可以用十六进制比如(#ff0000),也可以用颜色名称(比如red),或者RGB的值(比如rgb(255,0,0))表示。
background-color
CSS属性background-color用于指定元素的背景颜色。下面例子中我们分别为body
和h1
元素应用不同的颜色
h1{
color:#990000;
background-color:#FC9804;
}
body{
background-color: #FFCC66;
}
background-image
CSS属性background-image用于设置背景图片。
在下面的示例中,我们使用了一张蝴蝶的图像作为背景。你可以将该图片下载下来(方法为:鼠标右击该图片,然后选择“图片另存为”),以便在自己的计算机上使用。当然,你也可以选用其他你觉得满意的图片。
body{
background-color:#FFCC66;
background-image: url("./../pic/butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
background-repete
你有没有发现在上例中那个蝴蝶图片在横向和纵向都被平铺了?CSS属性background-repeat就是用于控制平铺的。下表概括了background-repeat的四种不同取值。
值 | 描述 | 示例 |
---|---|---|
background-reapet:repeat-x | 图像横向平铺 | 显示示例 |
backgound-repeat:repeat-y | 图像纵向平铺 | 显示示例 |
backgound-repeat:repeat | 图像横向和纵向都平铺 | 显示示例 |
background-repeat:no-repeat | 图像不平铺 | 显示示例 |
background-attachment
CSS属性background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。
一个固定的背景图像不会随着用户滚动页面而发生滚动(它是固定在屏幕上的),而一个非固定的背景图像会随着页面的滚动而滚动。
值 | 描述 | 示例 |
---|---|---|
background-attachment:scroll | 图像会跟随页面滚动——非固定的 | 显示示例 |
background-attachment:fixed | 图像是固定在屏幕上的 | 显示示例 |
background-position
缺省地,图像被放在屏幕的左上方,不过你可以通过background-position来修改这一设置,将背景图片放在你满意的位置。
设置background-position属性的值有多种方式。不过,它们都是坐标的格式。举例来说,值“100px 200px”表示背景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。
坐标可以是以百分比或固定单位(比如像素、厘米等)作为单位的值,也可以是“top”、“bottom”、“center”、“left”和“right”这些值。下图对此进行了解释:
下表给出了一些例子
值 | 描述 | 显示示例 |
---|---|---|
background-position:2cm 2cm | 图像被放置在页面内距左边2厘米、顶部2厘米的地方 | 显示示例 |
background-position:50% 25% | 图像被放置在页面内水平居中、离顶部四分之一处 | 显示示例 |
background-position:top right | 图像被放置在页面的右上角 | 显示示例 |
background
CSS属性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;
这两个未指定值的属性将被设置为缺省值:scroll
和top left
。