2013-10-14 124 views
0

我怎么能申请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; 
} 

和这里的的jsfiddlehttp://jsfiddle.net/ZXeQk/

我的代码是不完全没关系,我想申请不透明度仅用于背景即时通讯年龄并且也包括menu。我希望你明白。谢谢!

编辑:这里(http://i.imm.io/1io9t.png)是一个图像与我想要的。

+0

你能展示你想要做的事吗? – jhunlio

+0

是否尝试使用'rbga'作为背景颜色背景:rgb(0,0,0);/*对不支持rgba的浏览器回退*/ background:rgba(0,0,0,.5;' – jhunlio

回答

0

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

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

如果你希望你的背景图片也是透明的它会是更好地将其保存为PNG透明。