Question

我试图发出通知＆＃39;图像上的风格徽章。我使用Twitters Bootstrap作为基础框架并创建一个名为notify-badge的自定义CSS类。但我无法正常排队。

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

这是我的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;
}

我希望能够在徽章中放置任何一小部分文字，然后展开红色圆圈以适应。

这是我的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答案的图片。

将margin-top:-20px;添加到.item修复了对齐问题。

Answer 1

你可以通过不同的方式实现这一目标。这应该让你开始：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这里的想法是将绝对容器覆盖在相对容器之上。这是一个类似的例子：

for

CSS：

scan_files = [f for f in os.listdir(tmp_folder) if f.startswith('scan')]
scanlogzip = zipfile.ZipFile('scanlog.zip', 'w')
for j in range(1, len(scan_files)+1):
    scanlogzip.write('scan_%s' % j, compress_type=zipfile.ZIP_DEFLATED)

这将很好地将我们的文本放在图像的顶部，但它并没有完成我们想要在文本后面实现的框。为此，我们不能使用h2，因为这是一个块级元素，我们需要一个没有特定宽度的内联元素。所以，将h2包裹在一个范围内。

<div class="image">
      <img src="images/3754004820_91a5c238a0.jpg" alt="" />
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>

然后使用该范围来设置样式和文本：

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

有关如何确保正确间距或使用jQuery清除代码的想法，允许您从代码中删除一些标记并重新jQuery，请检查source。

Answer 3

这是我用示例代码制作的小提琴：

https://jsfiddle.net/un2p8gow/

我将notify-badge范围更改为div。我没有理由认为它必须是一个跨度。
我把位置改为亲戚。编辑 - 您可以实际保留属性position: absolute;，前提是您知道自己在做什么。评论中的家伙是对的。
您拥有属性right: 1.5rem;，我只是将其更改为left，因为它与您示例的方向相反。

你可以进一步调整它，但在真空中这就是你想要的。

使用Bootstrap对图像进行CSS徽章

3 个答案: