Html 使用 Bootstrap 覆盖图像的 CSS 徽章
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34685233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Badge over image with Bootstrap
提问by user-44651
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.
我试图在图像上放置一个“通知”样式的徽章。我使用 Twitters Bootstrap 作为基础框架，并创建了一个名为notify-badge. 但我无法让任何东西正确排列。
Through the magic of Photoshop, here is what I am trying to accomplish.
通过 Photoshop 的魔力，这就是我想要完成的任务。
Here is my CSS code.
这是我的 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.
我希望能够在徽章中放置任何小的文字，并扩大红色圆圈以适应。
Here is my HTML code.
这是我的 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>
EDIT:
编辑：
Here is the image with APAD1's answer.
这是带有 APAD1 答案的图像。
Adding margin-top:-20px;to .itemfixed the alignment issue.
添加margin-top:-20px;以.item修复对齐问题。
回答by APAD1
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>回答by noctrnal
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
这里的想法是在相对容器之上覆盖一个绝对容器。下面是一个类似的例子：
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
CSS：
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
这会将我们的文本很好地放在图像的顶部，但它并没有完成我们想要在文本后面实现的框。为此，我们不能使用 h2，因为这是一个块级元素，我们需要一个没有特定宽度的内联元素。因此，将 h2 包裹在跨度内。
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
然后使用该跨度来设置样式和文本：
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
有关如何确保适当的间距或使用 jQuery 通过允许您从代码中删除一些标签并将它们重新放入 jQuery 来稍微清理代码的想法，请查看源代码.
回答by TRose
Here's a fiddle I made with the sample code:
这是我用示例代码制作的小提琴：
https://jsfiddle.net/un2p8gow/
https://jsfiddle.net/un2p8gow/
I changed the
notify-badgespan into a div. I saw no reason it had to be a span.I changed the position to relative. Edit - you could actually keep the attribute
position: absolute;provided you know what you're doing with it. Guy in the comments was right.You had the attribute
right: 1.5rem;and I simply changed it toleftbecause it was being inset in the opposite direction of your example.
我将
notify-badge跨度更改为 div。我认为没有理由它必须是一个跨度。我将位置更改为相对位置。编辑 - 您实际上可以保留该属性，
position: absolute;前提是您知道自己在做什么。评论中的家伙是对的。您拥有该属性
right: 1.5rem;，我只是将其更改为，left因为它与您的示例的方向相反。
You can tweak it further but in a vacuum this is what you want.
你可以进一步调整它，但在真空中这就是你想要的。
