Bootstrap のモーダルに、テキスト ラベルで囲まれた画像があります。したがって、ブラウザを縮小するときは、テキストの位置が重要です (レスポンシブに正確である必要があります)。
このようにテキストもpngにある画像で簡単にこれを行うことができますが、好きではありません。
私が試したこと：
HTML:
<div class="modal-body">
<div class="container-fluid">
<img class="" src="img/panel/cutaway-drawing.png">
<span class="a">Open frame technology</span>
<span class="b">Roxul rock wool</span>
<span class="c">Camira fabric</span>
<span class="d">Damped membrane technology</span>
</div>
</div>
CSS:
.a {
position: absolute;
top: 55%;
}
.b {
position: absolute;
top: 25%;
}
.c {
position: absolute;
top: 55%;
left: 70%;
}
.d {
position: absolute;
top: 25%;
left: 70%;
}
.a .b .c .dの絶対位置がの.modal-body代わりに親となる理由がわからない場合を除いて、これは正常に機能するはずです.container-fluid。