I am building a map with mapbox.js. I have created a custom legend and want to make it partially transparent, but can't figure out the right CSS.
Here is my legend html snippet:
<div id='legend-content' style='display:none;'>
<div class='legend'>
<div class='legend-title'>My title</div>
<div class='legend-title'>My sub-title</div>
</div>
</div>
I can't figure out the right CSS to make it transparent.
.legend .legend-title {
text-align: Center;
margin-bottom: 8px;
font-weight: bold;
font-size: 120%;
color: #ffffff;
}
.legend{
background: rgba(80,80,80,0.3);
}
I have also tried to change the style of the map-legend directly. I don't think that this is a good way to go at it, but I found this obj in the browser dev tools.
.map-legend.wax-legend {
background: rgba(80,80,80,.1);
}
Can anyone help me get this working? My preference is to use the alpha in rgba on the background and leave the text fully opaque.
Thanks!
Aucun commentaire:
Enregistrer un commentaire