php源码底层做背景,双层背景，底层背景两边不同的样式写法

双层背景，底层背景两边不同的样式写法

最近做网站遇到了一个不常见的菜单样式，网站的宽度是1000px,中间主体部分用了原图作为背景，但是页面的两边遇到了问题：

这个模块是100%宽度的，而且外层的背景两边不相同，也没有规律，也就是说主体左边的背景和右边的不同，所以我们不能用传统的一个大背景做外层，内层再覆盖的方法。

解决方法：

.menu_side{position:relative;}

.menu_bg_l{width:50%;background:url(images/new_img/menu_bg_l.jpg) repeat-x;height:40px;position:absolute;left:0;}

.menu_bg_r{width:50%;background:url(images/new_img/menu_side.jpg) repeat-x;height:40px;position:absolute;right:0;}

.block{ width:1000px; height:auto;}

.menu_bg{background:url(images/new_img/menu_bg.jpg) 0 no-repeat;height:40px;position:relative;}

思路：首先定义一个外层，只做相对定位。

然后在该层下做两个块，左和右各50%宽度。并且绝对定位到该大层下。

这时应该有了一个大背景，左边和右边都不同。

然后再该层外再建立主要的菜单背景块，相对于大层相对定位即可。

标签：php css html