«
»

左右2边背景延展不同情况下的处理

[ 2010.01.20 | by ahwing | 网页重构 ]

看到土豆首页中，左右背景延展不同，不知怎地，受到了些许打击。自己琢磨了一夜，今天继续纠结，不过总算想出了些办法。

下面用到的xhtml都是相同的

xhtml：
<div class="bg1"></div>
<div class="bg2"></div>
<div class="wrapper"></div></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

1、首先想到了还是老式生硬的办法：js处理。
js处理很笨的原理，自然是在页面载入（onload）和浏览器尺寸改变时，自动修改左右2个div，bg1、bg2的尺寸了。代码如下：

css：
* { margin:0; padding:0;}
#bg1 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; left:0; top:0; height:100px; overflow:hidden;}
#bg2 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; right:0; top:0; height:100px; overflow:hidden;}
.wrapper { width:1000px; margin:0 auto; background:#FFF;}

JS:
function ss() {
var w = document.body.clientWidth;
if(w > 1000) {
document.getElementById('bg1').style.width = document.getElementById('bg2').style.width = (w - 1000) / 2 + 'px';
}
else {
document.getElementById('bg1').style.width = document.getElementById('bg2').style.width = 0;
}
}
if (document.addEventListener) {
window.addEventListener("load", ss, false);
window.addEventListener("resize", ss, false);
}
else if (document.attachEvent) {
window.attachEvent('onload', ss);
window.attachEvent('onresize', ss);
}

2、想想是不是css也能解决这样的问题，继续纠结，总算来了点感觉，从三列排列入手，慢慢想到自动宽度的问题，慢慢问题也得到解决，代码如下

css：
* { margin:0; padding:0;}
#bg1 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; left:0; top:0; z-index:-1; height:100px; width:50%;} 其中width:50%很关键，这样能保证在不管什么尺寸下，都是左右排列
#bg2 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; right:0; top:0; z-index:-1; height:100px; width:50%;}
.wrapper { width:1000px; margin:0 auto; background:#FFF;}

综合来说，自然第二种方法简单易行。以前一直以为左右背景一定要一样才行，现在看来，还是我们没开动脑筋。:-)

共有 16 条评论

  1. Bruce 说：
    2010-05-21于12:00

    Game UI/UE Group ++

    此群主要面向游戏业内界面设计师,交互设计师以及系统策划,欢迎技术讨论及灌水,希望大家不断提升，新加入请更新群名片-“公司缩写_网名”

    主要交流内容：游戏的GUI,User Interaction,User Experience业内交流，包含网络游戏及各主机平台游戏

    QQ群号：103673233
    LInkedin group 正在建立中

    [回复]

  2. Tony 说：
    2010-04-28于17:58

    你确定那上面的代码没有问题吗？xhtml：

    [回复]

  3. Don 说：
    2010-04-28于07:17

    JS 测试 貌似没有效果· 不过 第二种方法· 很赞~~ 学习了 ··

    [回复]

  4. Patrick 说：
    2010-04-26于22:04

    你确定那上面的代码没有问题吗？xhtml：

    [回复]

  5. Dave 说：
    2010-04-25于21:31

    Game UI/UE Group ++

    此群主要面向游戏业内界面设计师,交互设计师以及系统策划,欢迎技术讨论及灌水,希望大家不断提升，新加入请更新群名片-“公司缩写_网名”

    主要交流内容：游戏的GUI,User Interaction,User Experience业内交流，包含网络游戏及各主机平台游戏

    QQ群号：103673233
    LInkedin group 正在建立中

    [回复]

  6. Karen 说：
    2010-04-25于16:26

    你确定那上面的代码没有问题吗？xhtml：

    [回复]

  7. 命令与征服4 说：
    2010-03-18于20:19

    土豆还真是。。。。。。搞了一个很有个性的创新

    [回复]

  8. 淘客吧 说：
    2010-02-12于12:26

    第一次到访,希望以后多多交流

    [回复]

  9. lex 说：
    2010-02-10于13:24

    Game UI/UE Group ++

    此群主要面向游戏业内界面设计师,交互设计师以及系统策划,欢迎技术讨论及灌水,希望大家不断提升，新加入请更新群名片-“公司缩写_网名”

    主要交流内容：游戏的GUI,User Interaction,User Experience业内交流，包含网络游戏及各主机平台游戏

    QQ群号：103673233
    LInkedin group 正在建立中

    [回复]

  10. pyzy 说：
    2010-02-04于08:49

    在界面排版中“position:absolute;”可不是个好东东

    [回复]

  11. o仔 说：
    2010-02-02于14:37

    你确定那上面的代码没有问题吗？xhtml：

    [回复]

  12. jasonouyang 说：
    2010-01-29于14:54

    JS 测试 貌似没有效果· 不过 第二种方法· 很赞~~ 学习了 ··

    [回复]

  13. paper 说：
    2010-01-28于18:03

    结构是：
    #nav
    ->#nav-main
    ->#nav-right-bg

    [回复]

  14. paper 说：
    2010-01-28于18:02

    其实想法比较新颖，但是实现还是比较easy的。

    #nav{position:relative;background:url(leftBg.png) repeat-x;height:32px;}
    #nav-main{position:relative;height:32px;width:980px;margin:0 auto;z-index:1;background:url(midBg.png) no-repeat;}
    #nav-right-bg{height:32px;right:0;top:0;background:url(rightBg.png) repeat-x;position:absolute;width:50%;}

    [回复]

    ahwing 回复:
    一月 29th, 2010 at 14:16

    其实是一样的思路。

    [回复]

  15. 西灵 说：
    2010-01-21于09:37

    嗯，是要开动脑筋~
    收啦！

    [回复]

发表评论