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

Question

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

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。