网络编程
位置：首页>> 网络编程>> 网页设计>> css基础教程属性篇（6）

css基础教程属性篇（6）

作者：Jorux　来源：Jorux.com　发布时间：2008-07-23 12:44:00　

标签：教程,css,属性

5.background-position: 指背景图片的位置属性. 属性值可以有百分比, 位置名称和具体数值三种形式, 如下图所示(蓝色部分表示距离左边框的数据, 黑色部分表示距离上边框的数据):

可以看到, 要使背景图片位于左上角有三种方法, 代码如下:

background-position: 0％ 0％;
background-position: top left;
background-position: 0 0;

实际上, 不声明此属性, 即默认背景图片为左上角显示. 值得注意的是, 当用属性值为位置名称时, 先写距离上边框的数据(top), 后写距离左边框的数据(left). 而当用百分比或是具体数值表示时, 则反过来写.请读者仔细看看上图的蓝色和黑色部分的顺序.

不要小看这个属性, 在导航条的制作中, 这个属性将是实现一些动态变化的关键手段(将在以后的实例篇中说明).

Summary: 现在总结一下background的属性, 如果想让某背景图片表现为固定, 位于右上角, 不重复, 背景颜色为#CCC, 代码如下:

background-image: url(/file/UploadPic/20087/23/200872312569966.jpg);
background-color: #CCC;
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;

简写为:

background: url(/file/UploadPic/20087/23/200872312569966.jpg) #CCC fixed no-repeat top right;

表现如下(请用IE观看以下演示):

 

X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X

 

本篇正文完.

原以为可以多写几个属性的, 没想到字体和背景两个属性就写了这么长, 在体力和精神上都已经到了极限, 暂写到这, 其余的还看下回更新.

第一页 上一页 2 3 4 5
6
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com