JSFiddle - React, Tailwind, and code Playground

HTML

<body id="yellow" style="background: yellow;">
  <div id="red" style="background: red;">
    <div id="white">White</div>
    <div id="transparent">Transparent</div>
    <br>Red
  </div>
  Yellow
</body>

CSS

div {
  border: solid 1px black;
  padding: 5px;
  margin: 10px;
}

#white {
  background-color: #fff
}

;

JavaScript

function realBackgroundColor(elem) {
      var transparent = 'rgba(0, 0, 0, 0)';
      if (!elem) return transparent;

      var bg = getComputedStyle(elem).backgroundColor;
      if (bg === transparent) {
        return realBackgroundColor(elem.parentElement);
      } else {
        return bg;
      }
    }

    var ids = ['yellow', 'red', 'white', 'transparent'];
    for (var i = 0; i < ids.length; i++) {
      var elem = document.querySelector('#' + ids[i]);
      console.log(ids[i], realBackgroundColor(elem));
    }