html - 应用背景图像（父）并仍然保持背景颜色

Question

如何应用top背景图像menu并仍然保持背景颜色？

HTML：

<div class="top">
    <div class="menu">
        Nop.
    </div>
    Nam hendrerit erat eget tellus mollis facilisis. Mauris eget est ullamcorper, cursus massa quis, sollicitudin nulla. Vivamus rutrum blandit odio, vitae iaculis velit placerat et. Praesent et mauris et massa molestie laoreet. Phasellus pharetra id leo sit amet semper. Pellentesque ipsum velit, viverra non turpis nec, tristique consequat velit. In felis erat, ullamcorper ut ultricies ac, feugiat malesuada nunc.
</div>

CSS：

.top {
    background: url('http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg');
    opacity: 0.7;
}
.top .menu {
    background: #dedede;
}

这是JSFiddle：http: //jsfiddle.net/ZXeQk/

我的代码不完全正确，我只想将不透明度应用于背景图像并包含在内menu。我希望你明白。谢谢！

编辑：这里（http://i.imm.io/1io9t.png）是我想要的图像。

Answer 1

对于浏览器 > ie8 的支持，您可以使用 rgba 值使您的菜单半透明。

.top .menu {
    background: rgba(222,222,222,0.7);
}

如果您希望背景图像也透明，最好将其保存为透明 png。