Highlight Background color Overlap (soln)

by SelectNt

HTML

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>

  <body>
    <!-- <p>Alpha <span class="highlightTopic">Beta <span class="highlightYellow">Gamma Delta</span> Epsilon</span> Eta</p> -->
    <p>
      While Kafka is capable of being run on many OSs, <br />
      including Windows, macOS, <span class="highlightTopic hlBackgroundMs"><span class="highlightYellowPaint hlBackgroundMs">Linux</span>, and others</span>, <br />
      Linux is the recommended OS <span class="highlightContentObject hlBackgroundMs">for the <span class="highlightTechStack hlBackgroundMs">general</span> use</span> case.
    </p>
  </body>

</html>

CSS

/* 
span.highlightYellow {
  background-color: rgba(255, 237, 0, 0.5);
}

span.highlightTopic {
  background-color: rgba(182, 203, 232, 0.5);
}

span.highlightTopic span.highlightYellow,
span.highlightYellow span.highlightTopic {
  background: linear-gradient(-7deg, rgba(255, 255, 0, 0.5) 50%, rgba(182, 203, 232, 0.5) 50%);
}
 */

span.hlBackgroundMs {
  --color-main: aliceblue;
  background-color: var(--color-main);
}
span.highlightYellowPaint {
  --color-main: rgba(255,237,0,0.50);
  /* background-color: rgba(255,237,0,0.50); */
}
span.highlightTopic {
  --color-main: rgba(182,203,232,0.50);
  /* background-color: rgba(182,203,232,0.50); */
}
 span.highlightContentObject {
  --color-main: rgba(227,211,181,0.50);
  /* background-color: rgba(227,211,181,0.50); */
}
span.highlightTechStack {
  --color-main: rgba(223,245,203,0.50);
  /* background-color: rgba(223,245,203,0.50); */
}

p > span.hlBackgroundMs {
  --color-main-outerspan: var(--color-main);
}
span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-7deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);  
}