<style>
    img { width: 30px; height: 30px; background-color: red; }
    .cover { position: absolute; background-color: green; opacity: 0.7; }
</style>
<div style="height: 240px;
    padding-top: 260px;
    background-color: lightyellow;
    font: 40px ahem;
    color: red;
    -webkit-font-smoothing: none;
">
    <br>
    <br>
    <img id="t-0">
    <ruby id="t-1">1<span id="t-2">2</span><rt id="t-3">3</rt></ruby>
    <span>
        <div id="t-4" style="display: inline-block"><div id="t-5">5</div>4</div>
    </span>
    <span id="t-5">
        <img id="t-6">
    </span>
    <span id="t-7">
        7 <span id="t-8">8</span>
    </span>
</div>
<script>
    for (var i = 0; i < 9; ++i) {
        var element = document.getElementById("t-" + i);
        var clientRect = element.getClientRects()[0];
        var cover = document.createElement("div");
        cover.className = "cover";
        cover.style.width = clientRect.width + "px";
        cover.style.height = clientRect.height + "px";
        cover.style.top = clientRect.top + "px";
        cover.style.left = clientRect.left + "px";
        document.body.appendChild(cover);
    }
</script>