0

私は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 でピクセルを操作することは避け、関連するすべての % を実行しようとすることに注意してください。

4

1 に答える 1

0

あなたが達成しようとしていることは 100% 確実ではありませんが、HTML をクリーンアップして、探しているものを達成できると思います。各リスト項目を でラップして、同じ効果を得ることができます。例えば:

<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">
<a href="./web/Acercade.html"><img src="../img/tarta.jpg" alt=""><span>Sobre txorierri y Erandio</span></a>
</div>

次に、 を position:relative に設定し、 を position:absolute に設定して、ドキュメントの流れから外します。これにより、その空白も削除され、 left:-9999; を使用して画像に関連して配置または非表示にすることができます。不透明度:0;

少しでもお役に立てば幸いです。

于 2013-09-16T17:30:39.077 に答える