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

有关浏览器的支持＆gt; ie8你可以使用rgba值使你的菜单半透明。

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

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

应用背景图像（父级）并保持背景颜色

1 个答案: