Question

我在图像上覆盖了半透明背景的白色文字。对于单线，这很好用。但是，当文本是多行时，透明背景与下方和上方的线重叠，并在发生重叠的每一行之间创建一个丑陋的框。我也不想在两行之间留空空间，比如说行高很大 - 我正在寻找文本形状的统一透明背景。

以下是行动中重叠的代码集示例：

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），则行之间不会有重叠或空白。但是，将计算结果完全缩小到所有浏览器上的像素是一个愚蠢的差事，所以我对去那里并不感兴趣，特别是因为我的字体大小可能因桌面和移动设备而异。

Answer 1

如果使用inline-block并没有为你减少交易，那么一个好的黑客就是使用box-shadow来完成＆＃34;未填充的＆＃34;线之间的洞：

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

CSS：多行文本上的透明背景色，没有难看的重叠或行间距

1 个答案: