你在問題中描述的內容做錯了。一個絕對元素應該位於一個相對定位的父元素中。這允許絕對定位的元素根據父親定位自己。更好的方法是有一個相對父母,其元素是圖像和文字。
演示: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/
對不起,我被搞亂的東西。請seee編輯。我的問題是,雖然圖像仍在加載,但瀏覽器還沒有(現在)存在with/height值。我只需要加載圖像的工作量。實際的位置工作正常。 –
@BernhardPrange相信我,其他一些問題正在等着你解決。因爲這種方法不適合你所嘗試的。它在本地環境中工作的原因是圖像存在於本地,無需加載時間。在部署時,需要花費時間來加載圖像。那是事情搞糟的時候。 –
@K K我到目前爲止已經弄清楚了這一點。那麼什麼是正確的方法呢?正如我告訴你的那樣 - 我之前沒有測量過,因爲它全部響應。 –