如何將文字圖像

我試圖在與CSS和HTML下方的圖像寫入文本，但它不工作..如何將文字圖像

CSS

.social_media_head{ 
background: url(newsletter_image.gif) no-repeat center; 
position: relative; 
right: -9px; 
height: 0; 
width: 325px; 
padding: 30px 0 0 5px;  
} 

.media_name h2{ 
position: relative; 
top: 2px; 
} 

.media_name { 
position: relative; 
top: 2px; 
}

HTML

上

<div class="social_media_head"> 
    <h2 class="media_name">Social Media</h2> 
    </div>

例jsfiddle

更新如果我指的圖像是錯誤的，我非常抱歉。我想要放置文字的圖像是社交媒體圖標（臉譜，推特，YouTube）上的圖像......即，裏面的圖像=「social_media_head」。

我再次對此抱歉抱歉。

來源

2012-11-18 Dotunn Nnnn

文字在圖像上方。至少當我看到它。 –

http：// jsfiddle。淨/ fCUTm /你需要改變填充邊距，並設置高度圖像的高度 –

你可以通過設置文本比形象和地位絕對

.text{ 
z-index:101; 
position:absolute; 
/set the position of text you want 
} 

.image{ 
z-index:100; 
}

和上面的文字圖像更高的z-index做到這一點

.media_name h2應該h2.media_name

h2.media_name { 
    color: red; 
    margin-top: -30px; 

    top: 2px; 
}

full screen Result和fiddle

來源

2012-11-18 13:04:23

謝謝你的答案。請參閱更新 –

@DotunnNnnn你想要什麼？ –

@DotunnNnnn快速解決方案 '.media_name { color：red; margin-top：-30px; top：2px; }' –

適合我（簡體）：http://jsbin.com/uqazel/1/

也許你需要設置一個合適的height。

來源

2012-11-18 13:13:55

謝謝你的回答。請參閱更新 –

嘗試使用以下，以避免H-標籤，併爲箱來調整高度的圖像是內聯，而不是作爲背景：（see code here http://jsfiddle.net/jySZB/1/）

（由於更新，則舊的代碼被刪除，並保持在上面的鏈接 - 看到新的鏈接，下面的代碼） -

更新：如果「過的圖像」是指上面，而不是在頂部（這做在這情況下，更有意義），試試這個代碼，而不是：

http://jsfiddle.net/jySZB/2/

HTML：

<div class="social_media_head"> 
    <div>Social Media</div> 
    <img src="http://satcomng.com/types/twitter.png" alt="" /> 
    <img src="http://satcomng.com/types/twitter.png" alt="" /> 
    <img src="http://satcomng.com/types/twitter.png" alt="" /> 
</d

CSS：

.social_media_head { 
    display:block; 
} 
.social_media_head div { 
    color:red; 
    font-size:26px; 
    font-weight:bold; 
    font-family:sans-serif; 
    clear:both; 
}

結果：

result 2

提示：如圖片內聯在這裏，他們很容易轉換爲可點擊的鏈接去社交網站（我只用了一個圖片）。

來源

2012-11-18 13:55:36 K3N

感謝您的答案。請參閱更新 –

阿哈，您通過「在圖像上」您*意味着*以上*這些圖像？ – K3N

這個班的形象是我想把文字放在班上= 「social_media_head」 –

如何將文字圖像

回答

相關問題