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

Question

所以，这是一个带有内联元素<span>的段落<p>，其具有半透明背景rgba(0,0,0,0.5)。它包含多行文本。为了消除每行之间的背景之间的空隙，使用padding-top，padding-bottom。

例如，使用Open Sans 16px、26px行高和2px上下padding，在Webkit桌面浏览器中呈现良好（没有重叠），但在移动浏览器（Chrome）中会出现重叠。

可以通过将rgba(0,0,0,0.5)应用于块元素(<p>)来实现，但在这种情况下，背景将填充整个块，而我需要部分应用于块内的某些文本。不使用padding也不是一种选择——带有背景的行之间的间隙看起来很糟糕。

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>

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

- Michael

---

不使用非透明背景也不是一个选择。 - Mik

欢迎来到 Stack Overflow！寻求代码帮助的问题必须在问题本身中包含最短的代码，最好使用 Stack Snippet。请参阅如何创建一个最小化、可重现的示例。 - Paulie_D

Answer 1

我知道你说不使用透明背景不是一个选项，但我仍然认为最简单的解决方案是选择一个与你的非透明色调在视觉上完全相同的纯色背景。

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

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

参考图像如下。

调整浏览器渲染引擎之间的像素尺寸差异可能会耗费您的时间。

- Bumhan Yu

---

我有一个渐变背景，而且当手风琴元素被打开时，它会动态地改变。所以，基本上，如果你打开了其中的10个，中间的初始颜色将会发生巨大的变化。 - Mik

Answer 2

以下在Firefox上似乎有些错误，但在Chrome上运行良好。一个想法是使用多个背景，其中第二个将与主容器相同，但您必须考虑“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;
}

<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>
</div>

- Temani Afif

---

它在Safari中运行得非常好，但在Chrome中当您更改窗口大小时，它会出现问题。在Opera中也是如此。可能，在Firefox中也是如此。已更新初始帖子。还有其他想法吗？ - Mik

@Michael，在我的电脑上使用Chrome浏览器可以正常运行，但我会考虑其他解决方案。顺便说一下，请不要编辑您的问题以包含我的答案。保留原始帖子，您的评论已经足够突出问题。 - Temani Afif

@Temani Afif。好的，我会删除。在Chrome中尝试几个段落并更改窗口大小。 - Mik

@Michael，更准确地说，它在滚动时出现问题，而不是在调整大小时。当您滚动时，跨度的背景不会跟随另一个跨度。 - Temani Afif

@Temani Afif，当你滚动页面或调整窗口大小时，跨度上的渐变颜色会改变。 - Mik