html - 文本背景色透明无重叠

Question

我想在我的标题上添加背景颜色，它跟随内联文本，并且是半透明的，但我想保持行间距不变，同时避免行之间的颜色背景重叠。 br 用于演示目的。

<h2>
<span>I like<br>Turtles<br>Do<br>You?</span>
</h2>

这个 fiddle 解释了所有:http://jsfiddle.net/chrisjimallen/teFdZ/105/

我已经尝试了我能想到的，最接近的解决方案是内联 block span 标签，但它变成了一个盒子。

Answer 1

这是你要找的吗？只是玩填充。填充:1px 10px 0px 10px；顺时针(右上-左下)

h2   { font-family: sans-serif;
font-size:30px}
h2 span {
  color:#fff;
  line-height:35px;
  display:inline;
  background-color: rgba(252, 108, 33, 0.8);
  padding:1px 10px 0px 10px;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

<h2>
<span>I Like<br>Turtles<br>Do<br>You?</span>
</h2>