CODEWITHSUNDEEP
css
Axel Köhler
Axel Köhler

Reputation: 995

How do I avoid getting a lower opacity by a div in a div?

If I put things with opacity:1; in a div with opacity:0.5;, the one with opacity:1; gets an opacity of 0.5, but I don't wan't that, but I need the outside div to be 0.5 because that is a background. How do I fix this?

Upvotes: 0

Views: 64

Answers (4)

ajbeaven
ajbeaven

Reputation: 9572

This will depend on your use-case, but you may be able to use a background-color with opacity:

background-color: #8888FF; /* fallback for browsers with no alpha-transparency support */
background-color: rgba(0,0,255, 0.5);

Read more here.

Upvotes: 1

Sofien Benrhouma
Sofien Benrhouma

Reputation: 406

did you tried in the 1 opacity things to add a z-index:9999(just a big ) so hey will be at the top of the 0.5 division

Upvotes: 0

Pete Scott
Pete Scott

Reputation: 1526

While tricks could be employed, what you are trying to do is not possible. The child's opacity is relative to its parent. Thus, an opacity of "1" on the child will only ever equal the full opacity of its parent (0.5).

If the parent (opacity 0.5) is just a color, you can use rgba instead of opacity. Otherwise, you'll need to remove the child from its parent and use positioning to place the child above the background.

Upvotes: 0

Ron
Ron

Reputation: 514

Instead of doing this,

<div id="divA" style="opacity:0.5">
  divA
  <div id="divB" style="opacity:1">
     divB
  </div>
</div>

I always do the following as the alternative:

<div id="superparentdiv" style="position:relative">
  <div id="divA" style="opacity:0.5">
    divA
  </div>
  <div id="divB" style="opacity:1">
     divB
  </div>
</div>

and if the position matters, I apply position:absolute; to set the position of the divB

Hope this helps.

Upvotes: 0

Related Questions