布局问题,部分固定宽度,部分弹性

时间:2011-12-10 21:38:16

标签: html css background fixed liquid-layout

我已经浏览了一些帖子,但找不到我追求的内容。我现在正在用PS设计一些东西,在将设计编码为html + css时,我可以预见到一个问题。

想象一下我的中心div,它是960px。它将具有半透明.png作为背景。设计为“full width”,因此这个div将包含在一个更大的div中,设置为100%宽度。这一切都没问题,直到我到达这个外部div的背景。它也将有一个.png运行页面的整个宽度。问题是:我不希望它穿过中间,因为它会导致中间有一个双倍的厚度,如果这是有道理的?!

基本上,我需要一种方法来运行一个有弹性的div,或者阻止背景在浏览器窗口的中心960px部分运行。

我不知道如何实现这一点,除了使用JS设置宽度,我真的不想这样做。

有什么想法吗?

好的,我试图在这里找到基本问题:http://jsfiddle.net/8Bznc/1/

2 个答案:

答案 0 :(得分:0)

仅将background-image应用于包装div

或者,如果中心和侧面需要具有不同的图像,请同时向中心div提供不透明的background-color

此外,您可以使用多个background-images伪造它。 Demo

请记住,这在旧版本的IE中不起作用,但是作为背景透明度不重要的东西可以被排除在优雅降级之外。

答案 1 :(得分:0)

您可以在中心div上放置一个非透明背景,这样其他背景就不会显示出来。

见这里:http://jsfiddle.net/9bnHD/