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タグを避けるために次のことを試してください。ボックスの高さを調整するには、画像を背景としてではなくインラインにします:( 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

ヒント: 画像はここではインラインであるため、ソーシャル サイトに移動するためのクリック可能なリンクに簡単に変換できます (たとえば、1 つの画像のみを使用しました)。

于 2012-11-18T13:55:36.787 に答える
0

私のために働く（簡略化）：http://jsbin.com/uqazel/1/

適切な を設定する必要があるかもしれませんheight。

于 2012-11-18T13:13:55.223 に答える