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 ) は、私が欲しいイメージです。