Question

见my codepen。我希望制作蓝色背景色标以适应文字，＃34; My Pet＆＃34;。我尝试了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;*/
}

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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 ;
}

背景颜色尺寸适合文字？

3 个答案: