0

リンクされているように（下の画像に示されているように）通知カウントを達成するにはどうすればよいのでしょうか。

ここに画像の説明を入力してください

私は、背景画像を持つSpanを使用し、それと一緒にタグを使用して、同様のソリューションを実装しようとしました。

だいたい、

<span class="message-icon" title="Unread Message" style="display: inline-block"></span><span style="background-color: red"><sup><b>5</b></sup></span>

これは、LinkedInのサイトにあるものに近いところはありません。

すでに利用可能な調理済みのソリューションはありますか？またはそれをどのように達成できるかについてのアイデアはありますか？

4

2 に答える 2

2

これを見てください：http ：//jsfiddle.net/D3VVv/1/ この投稿から：10x10pxの画像を別の画像の上にオーバーレイするにはどうすればよいですか？

メッセージアイコンを含むdivをメッセージアイコン+通知アイコンと同じ大きさにすると、ポジショニングを使用してそのdivの右上隅に通知アイコンを配置できますabsolute。フィドルに示されているように。

于 2013-03-08T14:04:33.787 に答える
0

いくつかの方法があります。絶対測位の例を次に示します。

http://jsfiddle.net/e2Zs4/

HTML

<div class="con">

<img src="http://www.pictures-of-kittens-and-cats.com/images/cute-kitten-pictures-002-small.jpg" />

<img class ="number" src="http://www.privatefly.com/export/PrivateFly/.content/images/services/red_numbers_4.gif " />

</div>

CSS

.con { width:100px; height:100px; position:relative; }
.number { position:absolute; top:10px; right:10px; }
于 2013-03-08T14:05:56.923 に答える