背景颜色大小适合文本？

Question

请参阅 我的代码笔。我希望使蓝色背景色标适合文本“My Pet”。我尝试 display: inline 和 padding ，但我不知道如何设置背景以响应地适应文本，而不是全宽。另外，如何设置背景颜色的不透明度而不是文本？

谷歌搜索后，我仍然在努力寻找解决方案。

HTML:

 <div class="myDiv">
    <div class="bgImage">
        <h1>My Pet</h1>
    </div>
</div>

CSS：

 .myDiv h1 {
    font-family: 'Gabriela', serif;
    color: #FFF;
    margin: auto;
    text-align: center;
    font-size: 3.5em;
    border-radius: 20px;
    background-color: #2ba6cb;
/*  padding: 0.5em 0.2em 0.8em 0.5em;*/
}

原文由 thunderRX5 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这 是你想要达到的目标吗？

 .myDiv {
  text-align: center;
}

.myDiv h1 {
  display: inline-block;
  font-family: 'Gabriela', serif;
  color: #FFF;
  font-size: 3.5em;
  border-radius: 20px;
  background: rgba(43, 166, 203, 0.5 /* alpha value for background */);
  padding: 0.5em 0.2em 0.8em 0.5em;
}

 <div class="myDiv">
  <h1>My Pet</h1>
</div>

原文由 Ana 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

更短

width: max-content;

 .myDiv h1 {
    font-family: 'Gabriela', serif;
    color: #FFF;
    margin: auto;
    text-align: center;
    font-size: 3.5em;
    border-radius: 20px;
    background-color: #2ba6cb;
    width:max-content;
    padding:2px 20px;
}

 <div class="myDiv">
    <div class="bgImage">
        <h1>My Pet</h1>
    </div>
</div>

原文由 Pooya 发布，翻译遵循 CC BY-SA 4.0 许可协议