如何在图像上放置文本

时间:2012-11-18 12:59:04

标签: html css image

我正在尝试使用下面的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”中的图片。

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

3 个答案:

答案 0 :(得分:1)

请尝试以下操作以避免使用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;
}

结果:

result 2

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

答案 1 :(得分: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 Resultfiddle

答案 2 :(得分:0)

适合我(简化):http://jsbin.com/uqazel/1/

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

豫ICP备18024241号-1