谷歌地图上的CSS透明覆盖

Question

有以下代码：

    <div class="google-wrapper">
        <div id="google-map"></div>
        <div id="google-map-overlay">
            <p>Loading...</p>
        </div>
    </div>

我想谷歌地图覆盖是在谷歌地图上，有红色，我可以看到谷歌地图，即谷歌地图覆盖应该是透明的div。一些风格：

.google-wrapper {
    position: relative;
}
#google-map {
    width  : 500px;
    height : 380px;
}
#google-map-overlay {
    width  : 500px;
    height : 380px;
    background: red;
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 99;
} 

但是我不知道怎样才能做一个透明的叠加。提前谢谢。

Answer 1

您需要像这个DEMO 一样添加opacity

#google-map-overlay {
    width  : 500px;
    height : 380px;
    background: red;
    position: absolute;
    opacity: 0.5;/*add this*/
    top: 0px; 
    left: 0px; 
    z-index: 99;
}

顺便说一句，我想看看你最终想要什么