在圖像上覆蓋文字

我只是進入web開發（主要是iOS，Java，c＃程序員）。我有一個簡單的問題，它很煩人。在圖像上覆蓋文字

<div id="banner"> 
    <img src="Styles/Banner.jpg" alt="banner" /> 
    <div id="bannerText"> 
    User ID 
    </div> 
</div>

我有一面旗幟這是一個簡單的圖片（JPG格式），我想覆蓋一些文字。問題是將文字放在橫幅上。我真的不希望使用apsolute定位。我希望圖像和文字都居中。問題是我使用apsolute定位時，我似乎可以在圖像上疊加文本，如果窗口被調整，這將會受到影響。什麼是最好/簡單的方法來做到這一點。

就像要感謝你們所有人的幫助。 GC

來源

2012-08-16 geminiCoder

爲什麼你不想使用'position：absolute'，巧合的是，這將是最好的工具這個工作？ – 2012-08-16 10:56:17

Live demo

嘿，現在我想你應該想這個

HTML

<div id="banner"> 
    <img src="http://rapidgator.net/images/pict-download.jpg" alt="banner" /> 
    <div id="bannerText"> 
    User ID 
    </div> 
</div>

的CSS

#banner{ 
position:relative; 
    background:green; 
    padding:10px; 
} 
img{ 
vertical-align:top; 
} 
#bannerText{ 
position:absolute; 
    top:20px; 
    left:10px; 
    background:red; 
}

Demo

來源

2012-08-16 10:36:40

您必須給父元素（#banner）一個position: relative;以使其子級的絕對位置（#bannerText）依賴於橫幅位置而不是窗口邊界。

來源

2012-08-16 10:36:31 feeela

如果你可以使用CSS像下面的例子中使用的圖像作爲背景，而不是<img>標籤的

#bannerText 
    { 
    background: url("Styles/Banner.jpg") no-repeat center center; 
    width: 123px; 
    height: 123px; 
    text-align: center; 
    }

如果你不想使用Position: 如果你想使用<img>然後去「feeela的」答案

來源

2012-08-16 10:40:39 Chandrakant

在圖像上覆蓋文字

回答

相關問題