1

我正在尝试使用下面的 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）顶部的图像……即类中的图像=“social_media_head”。

再次为混乱感到抱歉。

4

3 回答 3

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;
}

全屏结果和小提琴

于 2012-11-18T13:04:23.953 回答
1

尝试以下操作以避免 H-tags，并且对于调整高度的框，图像是内联而不是背景：（请参见此处的代码 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;
}

结果：

结果 2

提示：由于图像在这里是内联的，因此它们很容易转换为可点击的链接以访问社交网站（例如，我只使用了一张图像）。

于 2012-11-18T13:55:36.787 回答
0

为我工作（简化）：http: //jsbin.com/uqazel/1/

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

于 2012-11-18T13:13:55.223 回答