'How to prevent overlapping opacity of text in CSS?

There are two semi-transparent text characters that overlap. The characters are contained within the same tag.

<p>┻━</p>

p {
    color: rgba(255, 255, 255, 0.5);
}

In the area where these two characters overlap, their opacity adds up.

enter image description here

Is there a way to prevent "double opacity" when characters overlap?

htmlcss


Solution 1:[1]

This is a purely experimental approach but you could try using mix-blend-mode, see: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode The problem with this is that you'll need to understand the blend modes and how they apply to what color your object is versus what color the background is. If you want that specific shape, you'd probably be better off using an SVG or using the actual intended color of the object instead of the alpha value.

body {
  background-color: lightblue;
}

p {
  font-size: 200px;
  color: rgba(255, 255, 255, 0.5);
  mix-blend-mode: hard-light;
}
<p>??</p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AStombaugh

Related Questions