圖像上的文字定位錯誤

我有一個圖像有position:absolute，所以我可以放置一個position:relative文本。圖像上的文字定位錯誤

到目前爲止，這一切都很好。唯一的問題是，文本顯示在瀏覽器上角，而圖像仍在加載。在洛克環境中，我看不到這一點，但在現實的環境中，它變得顯而易見。

靜態寬度/高度語句不是一個選項，因爲整個頁面都是響應式的。如何解決這個問題？有沒有另一種方式來告訴文本'大致'它是應該留在'img被加載後'當天晚些時候？

2015-12-30 Bernhard Prange

你在問題中描述的內容做錯了。一個絕對元素應該位於一個相對定位的父元素中。這允許絕對定位的元素根據父親定位自己。更好的方法是有一個相對父母，其元素是圖像和文字。

演示：https://jsfiddle.net/lotusgodkk/qwLp9f9y/6/

HTML：

<div> 
    <img src="http://de.fwsx.co/mbergs/images/home-header.jpg" /> 
    <span>Sample Text</span> 
</div>

CSS：

div { 
    position: relative; 
    width: 400px; 
} 

div img { 
    max-width: 100%; 
} 

div span { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    margin: auto; 
    width: 100px; 
    height: 20px; 
    color: white; 
    background: rgba(0, 0, 0, 0.4); 
    text-align: center; 
}

另一種選擇是將圖像設定爲母體的background-image，然後斷定離開文本。這樣你就不用擔心文字的位置。

這裏是背景圖像的演示：https://jsfiddle.net/lotusgodkk/qwLp9f9y/8/

來源

2015-12-30 11:05:07

對不起，我被搞亂的東西。請seee編輯。我的問題是，雖然圖像仍在加載，但瀏覽器還沒有（現在）存在with/height值。我只需要加載圖像的工作量。實際的位置工作正常。 –

@BernhardPrange相信我，其他一些問題正在等着你解決。因爲這種方法不適合你所嘗試的。它在本地環境中工作的原因是圖像存在於本地，無需加載時間。在部署時，需要花費時間來加載圖像。那是事情搞糟的時候。 –

@K K我到目前爲止已經弄清楚了這一點。那麼什麼是正確的方法呢？正如我告訴你的那樣 - 我之前沒有測量過，因爲它全部響應。 –

圖像上的文字定位錯誤

回答

相關問題