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

Question

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?

Could you please post your html and css? – ajbeaven Jul 10 '13 at 01:37 — ajbeaven, Jul 10 '13 at 01:37

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

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.

edited May 23 '17 at 10:32

Community

1
1

answered Jul 10 '13 at 01:44

ajbeaven

9,265
13
76
121

1

+1 for alpha transparently. Be sure to dev declare a fall back for older browsers before the rule by adding a background color with a hex value – Ray Jul 10 '13 at 04:47

score 0 · Answer 2 · answered Jul 10 '13 at 01:41

0

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.

answered Jul 10 '13 at 01:41

Ron

514
2
13

got it already. I can use **background-color:rgba(255, 255, 255, 0.5);** as the color of the outside div. – Axel Köhler Jul 10 '13 at 01:43

score 0 · Answer 3 · answered Jul 10 '13 at 01:41

0

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.

answered Jul 10 '13 at 01:41

Pete Scott

1,516
10
10

Right! I used **background-color:rgba(255, 255, 255, 0.5);** as the color of the outside div. – Axel Köhler Jul 10 '13 at 01:43

score 0 · Answer 4 · answered Jul 10 '13 at 01:44

0

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

answered Jul 10 '13 at 01:44

Sofien Benrhouma

406
3
8

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

4 Answers4