如何在另一个内部创建徽章? [英] How to create a badge inside another?
问题描述
我已经用另一个徽章里面的徽章限制了一张图片,我试图弄清楚他们是如何做到的?
解释
为了实现在你的包装元素中使用属性 position:relative
,并在子元素中使用 position:absolute
。
然后用 top:0
和将子元素放置在右上角。正确:0
。
最后一部分需要CSS3属性 transform
和 translate
属性。您可以在 CSS3 2D变换
或 transform | CSS-技巧
。
这里我们将使用 transform:translate(50%,-50%)
。第一个 50%
表示该元素将右移一半的宽度,第二个 50%
意味着该元素将脱离其自身高度的一半。
如果徽章具有固定宽度和/或高度,并且只使用固定宽度值。
示例
body {margin:25px} .outter-badge {位置:相对; margin:10px;}。inner-badge {position:absolute; top:0;正确:0; transform:translate(50%,-50%);}
< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css>< div class =badge outter < div class =徽章内部徽章> 1< / div>< / div>< div class =徽章徽章>主要标签< div class =标签label-primary inner-badge> 1< / div>< / div>< div class =徽章徽章>成功标签< div class =label label-success inner-badge> ; 1< / div>< / div>< div class =徽章外挂徽章>警告标签< div class =label label-warning inner-badge> 1< / div>< div>< div class =badge outter-badge>危险标签< div class =label label-danger inner-badge> 1< / div>< / div>< div class =badge外部徽章>信息标签< div class =label label-info inner-badge> 1< / div>< / div>
I have submiited an image with a badge inside another badge and i am trying to figure out how they did it?
Explanation
In order to achieve the desired behavior, use the property position: relative
in your wrapper element and use position: absolute
in the child element.
Then position the child element in the top/right corner with top: 0
and right: 0
.
The last part will require the CSS3 property transform
with the translate
attribute. You can read more about it in CSS3 2D Transforms
or transform | CSS-Tricks
.
We will use transform: translate(50%, -50%)
here. The first 50%
means that the element will be dislocated half it's own width to the right, and the second 50%
means that the element will be dislocated half it's own height up.
You could skip this part if your badge has a fixed width and/or height, and just use a fixed value.
Example
body {
margin: 25px
}
.outter-badge {
position: relative;
margin: 10px;
}
.inner-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<div class="badge outter-badge">badge
<div class="badge inner-badge">1</div>
</div>
<div class="badge outter-badge">primary label
<div class="label label-primary inner-badge">1</div>
</div>
<div class="badge outter-badge">success label
<div class="label label-success inner-badge">1</div>
</div>
<div class="badge outter-badge">warning label
<div class="label label-warning inner-badge">1</div>
</div>
<div class="badge outter-badge">danger label
<div class="label label-danger inner-badge">1</div>
</div>
<div class="badge outter-badge">info label
<div class="label label-info inner-badge">1</div>
</div>
这篇关于如何在另一个内部创建徽章?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!