0

I'm right now trying to create a web page that has some text appearing over some images. I have a few <span> elements that have a background with an alpha channel. I'm having an issue when the the <span> goes multi-line. I'd like for the transparency to be the same and not blend like this:

enter image description here

My CSS for the <span> is this:

.title {
  background: rgba(137, 39, 162, 0.85);
  padding: 6px;
}

How can I do that? I know I could adjust the line height, but I'd prefer not to. I'd like to only fix the alpha blending.

Benjamin
  • 1,223
  • 1
  • 13
  • 22
  • 1
    you might want to edit your snippet to actually reproduce the problem you're having. – Robert Wade Nov 05 '17 at 21:42
  • 1
    I understand your question and faced the same issue before, it is near to impossible to blend, however you can do some tricks like getting the blended color's RGB value (without alpha) and set it as solid background color – AngYC Nov 05 '17 at 22:07

0 Answers0