防止在文本元素上覆盖半透明背景

Question

因此，有一个段落<p>带有一个内联元素<span>，该元素具有半透明的背景rgba(0,0,0,0.5)。它包含多行文本。要消除每行背景之间的间隙，请使用padding-top, padding-bottom。

例如，将Open Sans 16px与26px的行高和2px的padding -top -bottom一起使用，在Webkit桌面浏览器（无间隙或无覆盖）中呈现良好，但在移动浏览器（Chrome）中具有覆盖。

可以通过将rgba(0,0,0,0.5)应用于块元素（<p>）来完成，但是在那种情况下，背景将填充所有块，因此我需要将其部分地应用于内部的某些文本一个街区。不使用填充也不是一种选择-背景线之间的间隙看起来很糟糕。

div {
  background: linear-gradient(to bottom, #00b3e3 0%, #2c5697 100%);
  color: #fff;
  font-family: Helvetica;
  font-size: 16px;
  line-height: 24px;
}
p {
  padding: 50px;
}
span {
  background-color: rgba(0,0,0,0.3);
  padding: 5px 0;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

在不同的浏览器中播放填充会产生不同的结果。

Answer 1

^{波纹管在Fiferox上似乎是越野车，但在镀铬上效果很好}

一个想法是使用多个背景，其中第二个将与主容器相同，但是您必须考虑使let selectedParties = data.filter(item => item.selected); let partiesWithSelectedMembersOnly = selectedParties.map(item => { return { ...item, members: item.members.filter(member => member.selected) }; }); 处于相同的位置，以产生相同的错觉。

我使用的颜色与您的示例不同，以便更好地查看结果

background-attachment:fixed

div {
  background: linear-gradient(to right, red, blue) fixed;
  color: #fff;
  font-family: Helvetica;
  font-size: 16px;
  line-height: 24px;
}
p {
  padding: 50px;
}
span {
  background: 
    linear-gradient(rgba(0,255,0,0.3),rgba(0,255,0,0.3)),
    linear-gradient(to right, red, blue) fixed;
  padding: 5px 0;
}

Answer 2

我知道您说过非透明背景不是一种选择，我仍然认为最简单的解决方案实际上是使用与您的非透明色调在视觉上相同的纯色背景。

例如，rgba(0, 0, 0, .5)呈现为rgb(127, 127, 127)，这是有道理的，因为在视觉上50％的透明黑色等于50％的灰色。

即使您使用的是彩色背景，例如rgba(25, 150, 90, .5)，也可以轻松地将其转换为纯色，在这种情况下为rgb(139, 203, 173)。

查看图片以供参考。

解决浏览器渲染引擎之间的像素尺寸差异可能会浪费您的时间。