CSS：多行文本上的透明背景颜色，没有难看的重叠或行之间的空间答案

【问题标题】：CSS: Transparent background-color on multi-line text, without ugly overlap or space between linesCSS：多行文本上的透明背景颜色，没有难看的重叠或行之间的空间
【发布时间】：2017-08-30 06:37:32
【问题描述】：

我在图像上覆盖了带有半透明背景的白色文本。对于单行，这很好用。但是，当文本是多行时，透明背景会与上下两行重叠，并在每行重叠的地方创建一个丑陋的框。我也不希望行之间有空白空间，比如行高是否很大——我正在寻找文本形状的统一透明背景。

下面是一个关于重叠操作的 codepen 示例：

https://codepen.io/haydentech/pen/oeQpXe

<h1 class="padded-multiline">
  <span>How can I have multiline text with a transparent background, without these ugly boxes between lines?</span>
</h1>

.padded-multiline { 
  line-height: 1.4; 
  padding: 2px 0; 
  width: 400px;
  margin: 20px auto;
}

.padded-multiline span { 
  background: rgba(0, 0, 0, 0.5);
  color: #fff; 
  display: inline;
  padding: 0.45rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

body {
  background: linear-gradient(to right, lightblue, yellow);
}

如果行高计算完美（上例中为 1.63），则行之间不会有重叠或空白。然而，在所有浏览器上完美地计算到像素是一件愚蠢的事，所以我对去那里并不感兴趣，特别是因为我的字体大小可能因桌面和移动设备而异。

【问题讨论】：

使用 inline-block 会解决这个问题，但不会使每一行都成为内联...我认为这对你不起作用？
@carlos-alves-jorge 我更喜欢 inline 给我的参差不齐的边缘，但 inline-block 是唯一一种实际给出可用结果的提议方法。

标签： html css

【解决方案1】：

如果使用 inline-block 不能为您解决问题，一个好的技巧是使用 box-shadow 来完成行之间的“未填充”孔：

.padded-multiline span { 
  box-shadow: 0 -5px 0 rgba(0, 0, 0, 0.5),0 6px 0 rgba(0, 0, 0, 0.5);
  line-height:150%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff; 
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

【讨论】：

这篇文章的答案也可以stackoverflow.com/questions/39238429/…
我很欣赏这个答案，但是使用 box-shadow 只是将“必须在所有浏览器上完美”的问题从 line-height 移到 box-shadow 上，并没有解决重叠线问题。不幸的是，我想我可能不得不坚持使用 inline-block。