使用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屋!