Question

我有以下布局：嵌套DIV，外部有100％宽度，内部有一些固定宽度。内部使用margin:auto居中。

现在我需要为DIV设置不同的背景。比如，内部应该是红色的，外部的剩余部分应该是绿色的。问题是背景需要半透明（使用PNG或CSS3的rgba()）。因此，内部DIV的背景看起来不是红色，它变成棕色！这是我的代码：

<div id="outer">
    <div id="inner"></div>
</div>

和CSS

#outer{width:100%;height:50px;background:rgba(0,255,0,0.5)}
#inner{width:800px;height:50px;margin:auto;background:rgba(255,0,0,0.5)}

我试图在#outer内使用3 浮动的 DIV。但是我不能为其他2个DIV设置宽度以使#inner位于屏幕的中心。 width:auto不起作用。

我知道桌子可以进行这样的布局;更确切地说，使用display:table-cell的元素。所以当我添加另一个“外部”DIV时，我得到了我需要的结果（表格式布局需要3个“级别”： table ， row ，细胞）。 CSS：

#outer2{display:table;width:100%}
#outer{height:50px;display:table-row}
#inner{width:800px;height:50px;background:rgba(255,0,0,0.5)}
#left, #right, #inner{display:table-cell}
#left, #right {background:rgba(0,255,0,0.5)}

和丑陋的HTML：

<div id="outer2">
    <div id="outer">
        <div id="left"></div>
        <div id="inner"></div>
        <div id="right"></div>
    </div>
</div>

还有其他方法可以将3个DIV连续放入这样的“余额”吗？或者，也许，有一种完全不同的方式来解决原始问题？我的意思是，问题的出现只是因为透明度！：）

我不喜欢display:table的解决方案，因为我添加了3个额外的DIV ...另外，请不要使用JS建议任何解决方案。

Answer 1

如果您感到前卫并且不介意丢失水平滚动条......

<强> HTML

<section></section>

<强> CSS

body { overflow-x:hidden; }
section {
    width:500px;
    height:50px;
    margin:0 auto;
    position:relative;
    background:rgba(255,0,0,0.5);
}
section:before, section:after {
    top:0;
    bottom:0;
    content:"";
    width:9999px;
    position:absolute;
    background:rgba(0,255,0,0.5);
}
section:after { left: 100%; }
section:before { right: 100%; }

演示：http://jsfiddle.net/6STug

帽子提示，CSS-Tricks

Answer 2

为什么不在#outer上使用单个后台png图像？图像可以包含半透明红色，然后是半透明绿色，再次是半透明红色。

Div布局具有半透明背景的问题

2 个答案: