时间戳

首页 > 解决方案 > 如何调整字母背景的大小？

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

问题描述

我有一个带有背景颜色的词。这很好，只是我希望背景颜色相对于单词具有一定的大小。简单地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>

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

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

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

谢谢。

该页面在这里，它根据桌面移动设备而有所不同。

标签： htmlcss

解决方案

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

推荐阅读