∥″可乐〃∥

让我展望未来，网络是我不变的终结者！

« 设计的杂谈 遵循用户习惯还是颠覆用户习惯网页文字首行缩进 »

网站背景图片定位

2009-1-16 8:36:13

网站建设和设计的时候，考虑到网站背景图片的定位要求，可以使用CSS背景图片位置属性background-position
通过网站背景图片的位置属性 background-position 可以改变背景图片的初始位置。

其语法格式如下：

backgroud-position:<百分比> | <长度> | <关键字>

需要说明如下几点：
（1）以百分比的方法设置backgroud-position 的方法如下：
backgroud-position: x% y%

其中，x%代表设置图片的水平位置；y%代表图片的垂直位置。初始为 0% 0%。例如
p{backgroud-position: 70% 50%;repeat-y;url(..\pic\sky.jpg)}.
其中省略了CSS关了网站背景图片的设置的属性backgroud-repeat和backgroud-image,..\pic\sky.jpg)是图片位置。

（2）以长度的方法设置backgroud-position 的方法如下：
backgroud-position: x y

使用长度单位可以对网站的背景图片的位置进行精确的控制，设定水平和垂直位置的起点。

p{background-position:70px 10px;url(..\pic\sky.jpg)}表示从左起70像素，垂直10像素的位置开始显示图片。

（3）以关键字的方法设置backgroud-position 的方法如下：
backgroud-position:[top \center\bottom] [left\center\right]
水平方向 垂直方向的

top 顶部对齐 (图片的垂直位置为 0%)
bottom 底部对齐 (图片的垂直位置为 100%)
left 左边对齐 (图片的垂直位置为 0%)
right 右边对齐 (图片的垂直位置为 100%)
center 图片水平，垂直位置都为50%

关键字方法和百分比方法的比对：

top 顶部对齐 (图片的垂直位置为 0%)
bottom 底部对齐 (图片的垂直位置为 100%)
left 左边对齐 (图片的垂直位置为 0%)
right 右边对齐 (图片的垂直位置为 100%)
center 图片水平，垂直位置都为50%
 

关键字方法和百分比方法的比对：

top left =left top 0% 0%

top =center top =top center 50% 0%

right top = top right 100% 0%

left =left center =center left 0% 50%

center =center center 50% 50%

right =center right =right center 100% 50%

bottom left =bottom right 0% 100%

bottom =bottom center =center bottom 50% 100%

bottom right = right bottom 100% 100%

固定网站背景图像

网站设计时使用CSS中的属性 backgroud-attachment 固定网站背景图像，其中固定背景图片属性决定指定的背景图片是跟随内容滚动的，还是保持固定。

其语法格式如下：

backgroud-attachment:scroll | fixed

需要说明的是，scroll表示滚动，fixed表示固定，初始为scroll。

使用background-attachment属性设置背景图片固定不变，其效果如下；

将下源代码保存为sxwl.htm,选择一张名为river.jpg的图片放在同一个目录下，在浏览器中打开sxwl.htm。
其中除了网页名称sxwl.htm，river.jpg可以更改以外，CSS中的back名称，图片的路径等都可以更改，不过要和调用他的地方作相应的修改。
<html>
<head>
<title>网站固定背景图片-来自杭州尚线网站制作</title>
<style type="text/css">
<!--
#back{background-image:url(river.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
font-size:14pt; color:white}
-->
</style>
</head>
<body id=back>
<center>
<font size=3 color=yellow>
使用CSS的background-attachment固定网站背景图片
</font>
</center>
<pre>
虞美人
春花秋月何时了
往事知多少
小楼昨夜又东风
故国不堪回首明月中
雕栏玉砌应犹在
只是朱颜改
问君能有几多愁
恰似一江春水向东流
</pre>
</body>
</html>
 

重复网站背景图像 background-repeat

background-repeat: repeat | repeat-x | repeat-y | no-repeat

语法解释：
repeat：网站背景图片水平和垂直方向同时平铺（默认）；
repeat-x:网站背景横向重复；
repeat-y:网站背景纵向重复；
no-repeat:不重复。

使用 background-repeat属性设置背景图片横向重复，举例如下：
<html>
<head>
<title>杭州网站建设，网站制作-背景重复</title>
<style type="text/css">
<!--
#bi{backgroud-image:url(sky.jpg);
backgroud-repeat:repeat-x}
-->
</style>
</head>
<body id=bi>
<center>
<font size=4 color=blue>
制作网站使用CSS设计背景重复效果！
</font>
</center>
</body>
</html>
 

网站  背景  图片  定位  
分类:CSS+XHTML | 评论:1 | 浏览:
Comments.

◎ welcome to participate in the discussion

日历

Comments.

Previous.

ADMIN. | EMAIL. | ABOUT.

Powered By Z-Blog 1.8 Spirit Build 80722Copyright © 2006-2011 可乐Blog Kele520.Com All Rights Reserved.[皖ICP备 06001314号]