通过Google地图进行CSS透明覆盖

Question

有以下代码：

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

我希望google-map-overlay超过google-map并且有红色，我可以看到google-map，即google-map-overlay应该是透明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;
}

它随便，我想看看你想要最终得到什么