39 lines
1.1 KiB
HTML
39 lines
1.1 KiB
HTML
<style>
|
|
img { width: 30px; height: 30px; background-color: red; }
|
|
.cover { position: absolute; background-color: green; opacity: 0.7; }
|
|
</style>
|
|
<div style="height: 500px;
|
|
background-color: lightyellow;
|
|
-webkit-writing-mode: horizontal-bt;
|
|
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">4<div id="t-5">5</div></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>
|