html - 如何调整字母背景的大小？

Question

我有一个带有背景颜色的词。这很好，只是我希望背景颜色相对于单词有一定的大小。简单地放置 background-color: blue, 为单词提供背景颜色，display: inline-block 使颜色与单词完全匹配。到目前为止，一切都很好。问题是，一旦我增加字体大小，背景颜色形状就会扭曲，要么变成一个覆盖单词一半的正方形，要么变成一条覆盖宽度但不覆盖高度的线。

@media (min-width: 768px) {
  .about5 {
    color: red;
    background-color: blue;
    display: inline-block;
    position: relative;
    font-size: 90px;
    left: 320px;
    font-weight: bolder;
    transform: rotate(90deg);
    bottom: 100px;
    z-index: 3 !important;
  }
}

<div class="about5">About</div>

这给出了蓝色的背景颜色，覆盖了单词的一半但没有覆盖另一半。

那么我如何让它覆盖整个单词并完全适合，甚至可能添加一点填充？

我可以只应用宽度和高度还是有其他方法？

谢谢。

页面是here它因桌面移动设备而异。

Answer 1

我检查了您网站上的元素，发现您的 about5 类的属性 width 和 height 都设置为 100px。您指定了这些尺寸，或者它们是从父元素继承的。仅删除 height 元素，然后将 width 更改为 auto 并添加 padding: 3%。这就是我在您网站的检查器中最终为我工作的原因，尽管代码在这个 JSFiddle 中对我来说工作得很好:https://jsfiddle.net/z0keyftb/