CSS прозрачный оверлей через Google Maps

Question

Есть следующий код:

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

Я хочу, чтобы Google-карта-оверлей через Google-карты и имеет красный цвет, и я мог видеть, Google-карты, т.е. 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

вам нужно добавить opacity как этот DEMO

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

это экспромтом, я хотел бы видеть именно то, что вы хотите, чтобы в конечном итоге получить