如何在另一个内部创建徽章？ [英] 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屋！