如何防止 CSS 中文本的重叠不透明度？答案

【问题标题】：How to prevent overlapping opacity of text in CSS?如何防止 CSS 中文本的重叠不透明度？
【发布时间】：2022-06-14 02:28:52
【问题描述】：

有两个半透明的文本字符重叠。这些字符包含在同一个标签中。

<p>┻━</p>

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

在这两个字符重叠的区域，它们的不透明度相加。

有没有办法防止字符重叠时出现“双重不透明度”？

【问题讨论】：

基本上没有
但也许你可以使用letter-spacing css 属性来避免重叠

标签： html css

【解决方案1】：

这是一种纯粹实验性方法，但您可以尝试使用mix-blend-mode，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode 问题在于您需要了解混合模式以及它们如何应用于您的对象是什么颜色与背景是什么颜色。如果您想要特定的形状，最好使用 SVG 或使用对象的实际预期颜色而不是 alpha 值。

body {
  background-color: lightblue;
}

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

&lt;p&gt;┻━&lt;/p&gt;

【讨论】：

【解决方案2】：

添加轻微的旋转（变换：旋转（0.01deg））隐藏重叠。

【讨论】：