不透明度和文本阴影的奇怪行为

Posted 2023-03-06

【中文标题】不透明度和文本阴影的奇怪行为

【英文标题】：Strange behaviors of opacity and text-shadow

【发布时间】：2011-12-05 09:26:38

【问题描述】：

Chrome 尝试将不透明度设置为低于 1 时遇到问题，因为文本的显示与不透明度为 1 时的外观不同

Paragraphs with mixed opacity values http://www.gabrielecirulli.com/p/20111011-163614.png

在图片中，我在您可以看到的一些段落上设置了opacity: 0.5;。如果您注意到，字体与完全不透明的版本不同，并且在 jQuery 的淡入动画结束时，您可以清楚地看到从一个版本到另一个版本的步骤。这只发生在 Chrome 中，我认为这不是我第一次注意到它。

我试过复制一段，现在效果更明显了：

The same paragraph with two different opacity values http://gabrielecirulli.com/p/20111011-164436.png

当字体变大时，同样的事情不会发生。

这是你可以看到的文本的 CSS 配置：

font-family: 'Tahoma', 'Verdana', 'Helvetica', 'Arial', sans-serif;
font-size: 13px;
color: #f4f4f4;

图片中选择的字体是 Tahoma。文字有文字阴影问题：

text-shadow: 0px -1px 0px rgba(0, 0, 0, .5), 0px -1px 5px rgba(0, 0, 0, .2);

从 CSS 中可以看出，阴影应该只向上移动一个像素，但由于某种原因，正如您在图片中看到的那样，它也向左偏移了一个像素。同样的问题在 Firefox 中也不会发生。将水平距离设置为 1px 会将其从当前位置移动 2px，并且无法解决问题。

【参考方案1】：

Chrome 在适用的情况下使用硬件加速渲染层合成，这可能会导致渲染差异。启用不透明度（或其他部分半透明）的元素就是这种情况，例如带有阴影的元素。请参阅https://sites.google.com/a/chromium.org/dev/developers/design-documents/gpu-accelerated-compositing-in-chrome，了解软件和硬件合成之间的区别以及有关该主题的更多详细信息。