使用Bootstrap的图像上的CSS徽章 [英] CSS Badge over image with Bootstrap

问题描述

我正在尝试在图像上放置通知"样式的徽章.我正在使用Twitters Bootstrap作为基础框架，并创建一个名为notify-badge的自定义CSS类.但是我什么都无法正确排列.

I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.

通过Photoshop的魔力，这就是我想要实现的目标.

Through the magic of Photoshop, here is what I am trying to accomplish.

这是我的CSS代码.

.notify-badge{
    position: absolute;
    background: rgba(0,0,255,1);
    height:2rem;
    top:1rem;
    right:1.5rem;
    width:2rem;
    text-align: center;
    line-height: 2rem;;
    font-size: 1rem;
    border-radius: 50%;
    color:white;
    border:1px solid blue;
}

我希望能够在徽章中放一些文字，然后将红色圆圈扩大到适合的位置.

I would like to be able to place any small about of text in the badge and it expand the red circle to fit.

这是我的HTML代码.

<div class="col-sm-4">
 <a href="#">
     <span class="notify-badge">NEW</span>
     <img src="myimage.png"  alt="" width="64" height="64">
 </a> 
    <p>Some text</p>
</div>

这是APAD1回答的图片.

Here is the image with APAD1's answer.

在.item中添加margin-top:-20px;可以解决对齐问题.

Adding margin-top:-20px; to .item fixed the alignment issue.

推荐答案

您可以通过多种方式来实现此目的.这应该可以帮助您开始:

Bunch of different ways you can accomplish this. This should get you started:

.item {
    position:relative;
    padding-top:20px;
    display:inline-block;
}
.notify-badge{
    position: absolute;
    right:-20px;
    top:10px;
    background:red;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:5px 10px;
    font-size:20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
  	<div class="item">
  		<a href="#">
			<span class="notify-badge">NEW</span>
      		<img src="http://placehold.it/200x200"  alt="" />
		</a>
	</div>
</div>

这篇关于使用Bootstrap的图像上的CSS徽章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！