背景颜色大小适合文本吗？答案

【问题标题】：Background Color Size fit with Text?背景颜色大小适合文本吗？
【发布时间】：2015-02-06 18:05:41
【问题描述】：

见my codepen。我希望使蓝色背景颜色比例适合文本“我的宠物”。我试过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;*/
}

【问题讨论】：

提供您迄今为止尝试过的内容。
是的，我添加了 codePen 示例 :)

标签： html css

【解决方案1】：

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

.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>

【讨论】：

是的，安娜，这就是我要找的。欣赏它。
我想为所有这些回复添加投票，但需要 15 名声望，叹息。

【解决方案2】：

这就是你想要得到的吗？这样就可以设置 bgImage 的不透明度了

.myDiv h1 {
    font-family: 'Gabriela', serif;
    color: #FFF;
    margin: auto;
    text-align: center;
    font-size: 3.5em; 
}

.myDiv {
  text-align:center;
}

.myDiv .bgImage{
  display:inline-block;
  background-color: #2ba6cb;
      border-radius: 20px;
    padding: 0.5em 0.2em 0.8em 0.5em;
}

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

【讨论】：

【解决方案3】：

您可以将 h1 显示为表格单元格并在文本周围添加所需的填充。

注意下面选择器的最后两条规则......

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

【讨论】：

【解决方案4】：

更短

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>

【讨论】：