文本背景颜色的透明度，没有重叠

Question

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

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

这个小提琴解释了所有：http://jsfiddle.net/chrisjimallen/teFdZ/105/

我已经尝试过我能想到的，最接近的解决方案是内联阻止span标记，但随后它变成了一个框。

Answer 1

这是你在寻找的吗？只是玩填充。 填充：1px 10px 0px 10px;顺时针（右上 - 左下）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;