JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="foo" style="background-color: red">
    I am red
<span id="bar">
    I have no background
</span>
    
    <span id="baz" class="bg_white">
    I am white
</span>
</div>
    I am yellow
</body>

CSS

body {background-color: yellow}

.bg_white {background-color: #FFF};

JavaScript

color_visible = function(color_str) {
    //rgba(0,0,0,0)
    return color_str && !(color_str.substr(0, 4) == "rgba" && color_str.substr(-2, 2) == "0)");
}

get_bgcolor = function(obj) {
    var ret = $(obj).css("background-color");
    if (!color_visible(ret)) ret = $(obj).css("bgcolor");
    if (color_visible(ret)) return ret;
    if (!$(obj).is("body")) return get_bgcolor($(obj).parent());
    return "rgb(255, 255, 255)";
}

console.log(get_bgcolor($("#bar")));
console.log(get_bgcolor($("#baz")));
console.log(get_bgcolor($("#foo")));
console.log(get_bgcolor($("body")));