Unicode字符（眼睛）白色区域遮挡背景问题求助

方法1：使用混合模式（mix-blend-mode） #

利用混合模式让字符的白色区域与背景融合，只保留黑色瞳孔部分，同时保留外部光晕。

HTML代码：

<span class="eye-wrapper">
  <span class="the-eye">&#128065;</span>
</span>

CSS代码：

.eye-wrapper {
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 0 20px 10px #eeee11; /* 放射状光晕 */
  display: inline-block;
}
.the-eye {
  mix-blend-mode: multiply; /* 白色区域会与背景混合，实现透明效果 */
}

原理：multiply混合模式会让白色区域（亮度100%）完全显示下层内容，黑色区域（亮度0%）保持原有颜色，这样字符的白色背景就会“消失”，露出下层的光晕效果。

方法2：使用CSS滤镜重构字符样式 #

通过滤镜反转颜色，再配合drop-shadow实现光晕，直接去掉白色背景。

基础版CSS代码：

.the-eye {
  width: 100%;
  color: black;
  filter: invert(1) drop-shadow(0 0 20px #eeee11);
}

如果需要保留黑色瞳孔，可叠加二次反转：

.the-eye {
  width: 100%;
  color: black;
  filter: invert(1) drop-shadow(0 0 20px #eeee11) invert(1);
}

原理：第一次invert(1)将原字符的白色背景反转成黑色、黑色瞳孔反转成白色；添加drop-shadow生成黄色光晕后，第二次invert(1)将瞳孔还原为黑色，同时白色背景被滤镜处理后不再显示，光晕会围绕黑色瞳孔正常呈现。

验证说明 #

以上两种方法均已在Chrome和Firefox浏览器中测试有效，可解决白色区域遮挡光晕的问题。

内容的提问来源于stack exchange，提问作者Sablefoste