如何在另一个内部创建徽章? [英] How to create a badge inside another?

查看：21
本文介绍了如何在另一个内部创建徽章?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我提交了一张在另一个徽章内带有徽章的图片，我想弄清楚他们是怎么做到的?

解决方案

说明

为了实现所需的行为，请在包装元素中使用属性 position:relative 并在子元素中使用 position: absolute.

然后使用 top: 0 和 right: 0 将子元素定位在右上角/右上角.

最后一部分将需要带有 translate 属性的 CSS3 属性 transform.您可以在 CSS3 2D Transforms 或 transform |CSS 技巧.

我们将在这里使用 transform: translate(50%, -50%).第一个 50% 表示元素将向右错位其自身宽度的一半，第二个 50% 意味着该元素将向上错位其自身高度的一半.

如果你的徽章有固定的宽度和/或高度，你可以跳过这部分，只使用一个固定的值.

示例

body {边距:25px}.外徽章{位置:相对；边距:10px；}.内徽章{位置:绝对；顶部:0；右:0；变换:翻译(50%，-50%)；}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css"><div class="徽章外徽章">徽章<div class="badge inner-badge">1</div>

<div class="badge outter-badge">主标签<div class="label label-primary inner-badge">1</div>

<div class="badge outter-badge">成功标签<div class="label label-success internal-badge">1</div>

<div class="badge outter-badge">警告标签<div class="label label-warning inner-badge">1</div>

<div class="badge outter-badge">危险标签<div class="label label-danger inner-badge">1</div>

<div class="badge outter-badge">信息标签<div class="label label-info inner-badge">1</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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆