I have a div and text written inside it.
.topoMenuSegmentos {
width: 470px;
height: 190px;
background-color: #0a1737;
display: block;
margin-top: -2px;
}
I want to apply a opacity:0.8 , what happens is that the text inside that div also gets opacity.
Is there an alternative?
If you use the background color RGBa this should work.
Test like this:
background-color: rgba(10,23,55,0.5);
Where 0.5 is the level of opacity.
For older browsers (IE9-) the solution is another. There you can use 2 divs, not descending from one another and position them one on top of the other.
Alternative is to use a% semi-transparent% as background image using background-repeat in case the size of the div is adaptive.
You can try to put a div inside another. As in the example below:
HTML:
<div class="container">
<div class="bg"></div>
</div>
CSS:
.container {
position: relative;
}
.container .bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
}