« 1 2» Pages: ( 1/2 total )
本页主题: [原创] 永远居中的背景图片 打印 | 加为IE收藏 | 复制链接 | 收藏主题 | 上一主题 | 下一主题

haakonapp
级别: 初出江湖


精华: 1
发帖: 21
威望: 25 点
财富: 839 K币
贡献值: 0 点
注册时间:2005-04-23
最后登录:1970-01-01

 [原创] 永远居中的背景图片

系统提示:这是一个从旧版社区导入的帖子。
如果显示不正常,或需要查找旧帖中上传的附件,请参照原帖。
原帖地址:http://my.iecn.net/bbs/view/17156.html
如非必要,请不要修改此帖!如果修改,请保留以上信息。
效果: 不管你向哪个方向拉动滚动条,图片总在网页正中间(可以用来做广告哦。。)

<head><STYLE TYPE="text/css">
<!--
BODY {background-image:URL(google.gif);//定义想要显示的图片
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed:}
-->
</STYLE>
</head>
顶端 Posted: 2005-04-29 13:09 | [楼 主]
@白瓜
级别: 江湖大侠


精华: 3
发帖: 902
威望: 1087 点
财富: 814 K币
贡献值: 0 点
注册时间:2003-10-11
最后登录:2007-04-11

 

我一般这个都在Dreamweaver里面做的,
呵呵,现在手工代码还不会写啊!!!

系统提示:这是一个从旧版导入的帖子,如有问题请参照原帖(原帖地址见顶楼)。

顶端 Posted: 2005-04-30 01:24 | 1 楼
枫岩
我在想念 心已累倦
级别: 总版主


精华: 12
发帖: 25380
威望: 21612 点
财富: 4565 K币
贡献值: 3 点
注册时间:2003-12-28
最后登录:2008-09-24

 

background: #FFFFFF url('google.gif') no-repeat 50% 50%;
修改百分数值可定位于任意位置。

系统提示:这是一个从旧版导入的帖子,如有问题请参照原帖(原帖地址见顶楼)。

顶端 Posted: 2005-05-05 09:30 | 2 楼
7kill_钟钟
级别: 无敌至尊


精华: 25
发帖: 13907
威望: 8305 点
财富: 2669 K币
贡献值: 11 点
注册时间:2006-07-26
最后登录:2008-08-23

 

以下是引用内容:

最初由 枫岩 发布
background: #FFFFFF url('google.gif') no-repeat 50% 50%;
修改百分数值可定位于任意位置。
这有一个图片宽度在里面了,应该是按图片的左上角定位的,也就是说从图片的整体来看并不是正中间。

系统提示:这是一个从旧版导入的帖子,如有问题请参照原帖(原帖地址见顶楼)。

顶端 Posted: 2005-05-05 12:08 | 3 楼
枫岩
我在想念 心已累倦
级别: 总版主


精华: 12
发帖: 25380
威望: 21612 点
财富: 4565 K币
贡献值: 3 点
注册时间:2003-12-28
最后登录:2008-09-24

 

以下是引用内容:

最初由 钟钟 发布
这有一个图片宽度在里面了,应该是按图片的左上角定位的,也就是说从图片的整体来看并不是正中间。

呵呵,老大,我对这个还是比较了解的,就多敲点字吧^_^

背景图片的定位与写法有关,如果是写成具体的像素值,则与图片的左上角顶点有关;若写成百分数,则只与图片中心点有关。

1.若写成百分数:

<div style="width:180px;height:90px;border:1px red solid;background: #FFFFFF url(http://www.iecn.net/images/logo_bbs.gif) no-repeat 50% 50%;">IECN</div>

则是以DIV的左上角顶点为基点,以图片的中心点为偏移点;偏移点相对与基点进行偏移,偏移尺寸的百分比以DIV的宽度(此外为180px)和高度(此外为90px)为基准;偏移方向:第一个数值指水平方向,第二个数值指竖直方向,取值可为正为负。

2.若写成具体的像素值:

<div style="width:180px;height:90px;border:1px red solid;background: #FFFFFF url(http://www.iecn.net/images/logo_bbs.gif) no-repeat 15px 5px;">IECN</div>

不同之处:这时是以图片左上角顶点为偏移点。其余与写成百分数形式基本一样。

百分比效果:
HTML 代码:


具体像素值效果:
HTML 代码:


另,如果只是想要背景图居在正中央的话,以下写法等价:
HTML 代码:

HTML 代码:

系统提示:这是一个从旧版导入的帖子,如有问题请参照原帖(原帖地址见顶楼)。

顶端 Posted: 2005-05-05 18:25 | 4 楼
枫岩
我在想念 心已累倦
级别: 总版主


精华: 12
发帖: 25380
威望: 21612 点
财富: 4565 K币
贡献值: 3 点
注册时间:2003-12-28
最后登录:2008-09-24

 

晕,此处敲成此外了-_-

系统提示:这是一个从旧版导入的帖子,如有问题请参照原帖(原帖地址见顶楼)。

顶端 Posted: 2005-05-05 18:26 | 5 楼
Minisheep
级别: 入门弟子


精华: 0
发帖: 6
威望: 8 点
财富: 822 K币
贡献值: 0 点
注册时间:2004-08-20
最后登录:1970-01-01

 

关键代码在background-attachment:fixed.
这是CSS1.0里的,不过IE不完全支持。目前只有在body标签里才能显示background-attachment:fixed的效果,在div中IE不支持

系统提示:这是一个从旧版导入的帖子,如有问题请参照原帖(原帖地址见顶楼)。

顶端 Posted: 2005-05-06 09:39 | 6 楼
中华大天才
级别: 入门弟子


精华: 0
发帖: 18
威望: 19 点
财富: 833 K币
贡献值: 0 点
注册时间:2005-04-12
最后登录:2007-10-12

 

难怪我在CSS中做水印中是没有效果

系统提示:这是一个从旧版导入的帖子,如有问题请参照原帖(原帖地址见顶楼)。

顶端 Posted: 2005-05-21 01:06 | 7 楼
7kill_钟钟
级别: 无敌至尊


精华: 25
发帖: 13907
威望: 8305 点
财富: 2669 K币
贡献值: 11 点
注册时间:2006-07-26
最后登录:2008-08-23

 

刚刚看到这帖,枫岩说的没错,百分比的时候是按中心点而非左上角,受position:absolute;定位的规则影响了(绝对定位时始终是按左上角)。

系统提示:这是一个从旧版导入的帖子,如有问题请参照原帖(原帖地址见顶楼)。

顶端 Posted: 2005-05-21 23:36 | 8 楼
alex
Alex
级别: 论坛版主


精华: 0
发帖: 736
威望: 919 点
财富: 13643 K币
贡献值: 0 点
注册时间:2004-12-28
最后登录:2008-08-26

 

大家研究的这么透彻阿!!
佩服!!

系统提示:这是一个从旧版导入的帖子,如有问题请参照原帖(原帖地址见顶楼)。

顶端 Posted: 2005-05-23 18:58 | 9 楼
« 1 2» Pages: ( 1/2 total )
帖子浏览记录 版块浏览记录
IECN社区 » XHTML/CSS/Dreamweaver

Time now is:11-23 07:28, Gzip disabled 京ICP备06069722号
Powered by PHPWind v6.3.2 Certificate Code © 2003-08 PHPWind.com Corporation