html - CSS 透明覆盖 Google map

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

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

即兴的，我想看看你最终想要得到什么