私はhtml、cssが初めてで、縦に並べられたいくつかの画像で構成されるモバイルアプリのメニューを作成しようとしています。この画像にテキストをオーバーレイしたいと思います。たとえば、スポーツ情報関連のアプリのメイン メニューを想像してみてください。5 つの背景画像、サッカーの画像、バスケットボールの画像、ゴルフの画像が含まれています...各画像の下部にテキストがあります。
これにアプローチするために、次の html コードを作成しました。
<body onload="onBodyLoad()">
<div id="cabecera">
<h1></h1>
</div>
<div id="menu-opciones">
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<a href="./web/Acercade.html"></a>
<h2><span>Sobre txorierri y Erandio</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<a href="./web/LugaresDeInt.html"></a>
<h2><span>Lugares de interes</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<a href="./web/DondeComer.html"></a>
<h2><span>Dónde comer</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<a href="./web/DondeDormir.html"></a>
<h2><span>Dónde dormir</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/fronton.jpg" alt="">
<a href="./web/TiempoLibre.html"></a>
<h2><span>Tiempo libre</span></h2>
</div>
</div>
</body>
このようにして、画像、テキスト、別の画像、そして別のテキストを取得します.cssを使用して、テキストを再配置して各画像をオーバーレイしました。問題は、以前のテキストがあった場所を空にして、画像を隣り合わせにしたいことです。その空きスペースを取り除くための最良の方法は何ですか? これはモバイル アプリ用であるため、css でピクセルを操作することは避け、関連するすべての % を実行しようとすることに注意してください。