刪除將文本疊加到img時留下的空白空間（html，css）

將新的html導入到html，css和im中，嘗試爲一個移動應用程序執行一個菜單，該菜單包含一些圖像，想要將一些文字疊加到這個圖像上。例如，想象一個運動信息相關應用程序的主菜單，它包含5個背景圖像，足球圖像，籃球圖像，高爾夫球圖像......每個圖像的底部都有文字。刪除將文本疊加到img時留下的空白空間（html，css）

接近這一點，我做了以下的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上的像素，並嘗試執行所有與％有關的操作。

來源

2013-01-16 Golan_trevize

能夠看到你的CSS也會很有幫助。一個jsfiddle的例子會更加理想:) – gotohales

請看看[jsFiddle]（http://jsfiddle.net）並重新創建你的問題，以便我們可以看一看 –

不是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>

然後，設置到的位置是：相對的，到的位置是：絕對的把它拿出來的文件的流動。這也將消除這個空白區域，你可以使用左邊的符號來定位它或者將它隱藏起來：-9999;和不透明度：0;

希望對你有所幫助。

來源

2013-09-16 17:30:39 bilcker

刪除將文本疊加到img時留下的空白空間（html，css）

回答

相關問題