Font Property
背景(background): 包括background-color, background-image, background-repeat, background-attachment, background-position五种属性.
1. background-color: 指背景颜色, 其属性值有三种形式, 十六进制, 颜色名称, rgb值. 目前最为常用的是”#+十六进制数”. 例: 本站显示代码的段落背景为#EEEEEE的灰色, 代码及示例如下:
background-color: #EEEEEE;
2. background-image: 指背景图片, 其属性值为背景图片的地址, 代码和格式如下:
background-image: url(http://jorux.com/back.png);
例: 本站首页的第一篇文章标题前有个”NEW”图标, 查看css可见如下代码:
#homeheadline a{
color:#444;
padding: 30px 68px 0 40px;
margin:0;
background:url(images/new.png) no-repeat 0 16px ;
}
3. background-repeat: 指背景图片的重复与否以及重复方式, 有no-repeat, repeat, repeat-x, repeat-y四种属性值.
no-repeat: 即无论背景图片的大小, 只显示单个背景图片, 如首页的第一篇文章标题前的”NEW”图标, 代码如上所示;
repeat: 指背景图片横向和纵向重复连续显示;
repeat-x: 指背景图片横向重复连续显示;
repeat-y 指背景图片纵向重复连续显示;例: 查看本站css文件,可以看到以下代码:
body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}
可以看到背景图片bodybg.jpg是纵向重复显示的, 并随页面的长度的增加而增加.
4. background-attachment: 指背景图片的附着方式, 有scroll(默认属性)和fixed两种属性值. scroll指背景图片随页面的滚动而滚动, 而fixed属性值则可使背景图片固定于浏览器的某个位置, 不随页面滚动而滚动. 如下例所示, 您可以试着滚动本页面来看看两图的差别, 左边为scroll, 右边为fixed(请用IE观看以下演示):
5.background-position: 指背景图片的位置属性. 属性值可以有百分比, 位置名称和具体数值三种形式, 如下图所示(蓝色部分表示距离左边框的数据, 黑色部分表示距离上边框的数据):
可以看到, 要使背景图片位于左上角有三种方法, 代码如下:
background-position: 0% 0%;
background-position: top left;
background-position: 0 0;
实际上, 不声明此属性, 即默认背景图片为左上角显示. 值得注意的是, 当用属性值为位置名称时, 先写距离上边框的数据(top), 后写距离左边框的数据(left). 而当用百分比或是具体数值表示时, 则反过来写.请读者仔细看看上图的蓝色和黑色部分的顺序.
不要小看这个属性, 在导航条的制作中, 这个属性将是实现一些动态变化的关键手段(将在以后的实例篇中说明).
Summary: 现在总结一下background的属性, 如果想让某背景图片表现为固定, 位于右上角, 不重复, 背景颜色为#CCC, 代码如下:
background-image: url(http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg);
background-color: #CCC;
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
简写为:
background: url(http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg) #CCC fixed no-repeat top right;
表现如下(请用IE观看以下演示):
本篇正文完.
原以为可以多写几个属性的, 没想到字体和背景两个属性就写了这么长, 在体力和精神上都已经到了极限, 暂写到这, 其余的还看下回更新.
