Запрет наложения полупрозрачного фона на текстовые элементы

Question

Итак, есть абзац <p> со встроенным элементом <span>, который имеет полупрозрачный фон rgba(0,0,0,0.5). Он содержит более одной строки текста. Чтобы убрать пробел между фонами в каждой строке, используется padding-top, padding-bottom.

Например, при использовании Open Sans 16px с высотой строки 26px и отступом 2px -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, похоже, глючит сильфон, но он отлично работает на 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>

Answer 2

Я знаю, что вы сказали, что непрозрачный фон - это не вариант, я бы все же поспорил, что самое простое решение - это на самом деле go с solid цвет фона, который визуально идентичен вашему непрозрачному оттенку.

Например, rgba(0, 0, 0, .5) отображается как rgb(127, 127, 127), что имеет смысл, поскольку 50% прозрачного черного визуально равно 50% серого.

Даже если вы используете цветной фон, скажем, rgba(25, 150, 90, .5), его можно легко преобразовать в solid цвет - в данном случае rgb(139, 203, 173).

См. Изображение для справки .

Из-за несоответствия между размерами в пикселях между механизмами рендеринга в браузере может отнять время.