如何在图像上放置文本

Question

我正在尝试使用下面的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

更新 如果我所指的形象错了，我很抱歉。我想要放置文本的图像是社交媒体图标（facebook，twitter，youtube）顶部的图像...即。 class =“social_media_head”中的图片。

我再次为这种骚扰感到抱歉。

Answer 1

你可以通过设置高于图像的文本的z-index和绝对位置

来做到这一点

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

.image{
z-index:100;
}

以及图片上方的文字

.media_name h2应为h2.media_name

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

    top: 2px;
}

full screen Result和fiddle

Answer 2

请尝试以下操作以避免使用H-tag，并且对于调整高度的框，图像为内联而非背景：（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;
}

结果：

提示：由于图片在此处内嵌，因此很容易转换为点击式链接以转到社交网站（例如，我只使用了一个图片）。

Answer 3

适合我（简化）：http://jsbin.com/uqazel/1/

也许你需要设置一个合适的height。