Question

我的跨文本1背景色为红色。我想将背景颜色变成圆形，它将包含跨文本1。但是我现在所做的并不是那么狡猾。

我怎样才能完成这项工作？

.text-span{
  background:red;
  border-radius:20px;
}

<span class="text-span">1</span><span>info</span>

Answer 1

首先，您需要将其显示为内联块。这允许您操纵其大小。

然后，你需要给他相同的高度，相同的宽度，使其成为正方形。

之后，您将使边界半径为50％，使其变圆。

最后，你可以通过给它高度的行高和中心对齐文本来使它居中。

瞧！

<span class="text-span">1</span><span>info</span>

Answer 2

试试这个：

＆＃13;

.text-span{
    background:red;
    border-radius:50%;
    display:inline-block;
    width:20px;
    height:20px;
    text-align:center;
}

＆＃13;

<span class="text-span">1</span><span>info</span>

＆＃13;

希望它有所帮助!!

Answer 3

您只需使用填充即可将内容绝对居中于圆圈内。我建议你使用一个简单的片段将这个片段集中在其中的任何内容。

此解决方案只有一个注释，您需要设置足够大的圆形大小或使用text-overflow属性裁剪内容。

＆＃13;

.text-span {
  display: inline-block;
  background: rebeccapurple;
  border-radius: 50%;
  position: relative;
  width: 30px;
  height: 30px;
  font-family: sans-serif;
  margin-right: 8px;
  vertical-align: middle;
}

.text-span::before {
  content: attr(data-content);
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
}

＆＃13;

<div>
  <span class="text-span" data-content="1"></span>
  info
</div>


<div>
  <span class="text-span" data-content="99"></span>
  info
</div>

＆＃13;

如何在跨度文本上制作背景颜色圆形

3 个答案: