CSS background color inheritance

Question

I have a parent div and a child div.

.container {
  width: 300px;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.7)
}

.child {
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.3)
}

<div class="container">
  <div class="child">
  </div>
</div>

The child element background color looks different from rgba(0, 0, 0, 0.3) as it is inheriting background color from parent.

Shouldn't the background color for the child look like rgba(0, 0, 0, 1) as rgba(0, 0, 0, 0.3) is applied on top of rgba(0, 0, 0, 0.7)?

If you are down voting please put a comment why you are down voting.

JS Fiddle Link

))). No. They dont overlap :D. Dont think like this with css — Nicholas, Mar 08 '18 at 15:55
I don't think it works like that since 0.5 and 0.5 in opacity world is not 1 — zmuci, Mar 08 '18 at 15:56

score -3 · Answer 1 · answered Mar 08 '18 at 16:10

I believe that since you are inheriting the color you can use "inherit" in the css code as follows:

.container {
  width: 300px;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.7)
}

.child container{
  width: 200px;
  height: 200px;
  background-color:inherit
}

<div class="container">
  <div class="child">
  </div>
</div>

CSS background color inheritance

1 Answers1