Apply opacity only in background

Asked

Viewed 71,487 times

6

I have a div and text written inside her.

.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 that is inside this div also gets the opacity.

Is there any alternative?

css

  • http://www.css3maker.com/css-3-rgba.html uses this, solved my problem

2 answers

16


If you use the background color Rgba format this should work.

Test like this:

background-color: rgba(10,23,55,0.5);

Where 0.5 is the opacity level.

For older browsers (IE9-) the solution is different. There you can use 2 Divs, not descended from each other and position one on top of the other.

Alternative is to use a .png semi-transparent as background image using background-repeat in case the size of the div is adaptive.

  • Sérgio, the opacity is incompatible with IE8?

  • @Felipestoker IE8 is no longer supported by Microsoft so I also stopped supporting :P Seriously, the answer is no. To do this in IE8 you have to have a div superimposed on another, without one being descended from the other.

  • I also can’t stand IE ahah, but you know, many users still use it. Yeah, I was reading and for IE8, the ideal is a transparent . png. D

  • 1

    :) @Felipestoker added info to IE9- in reply also.

1

You can try putting a div within 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;
}

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.