不透明度和文本阴影的奇怪行为
我在 Chrome 尝试将不透明度设置为低于 1 时遇到问题，因为文本的显示方式与不透明度为 1 时的外观不同
具有混合不透明度值的段落http://www.gabrielecirulli.com/p/20111011-163614.png
在图片中，我在您可以看到的几个段落上设置了不透明度：0.5;。如果您注意到，字体与完全不透明的版本不同，并且在 jQuery 淡入动画结束时，您可以清楚地看到从一个版本到另一个版本的步骤。这种情况只发生在 Chrome 中，我想这不是我第一次注意到它。
我尝试过复制一个段落，现在效果更加明显：
具有两种不同不透明度的同一段落值 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 的位置，并且不会解决问题。
I'm having a problem with Chrome trying to set an opacity below 1 because the text will appear different than how it looks when the opacity is 1
Paragraphs with mixed opacity values http://www.gabrielecirulli.com/p/20111011-163614.png
In the picture I've set the opacity: 0.5; on a few of the paragraphs you can see. If you notice, the font is different than the version with full opacity and at the end of jQuery's fade-in animations you can clearly see the step from one version to another. This only happens in Chrome and I think it's not the first time I notice it.
I have tried duplicating a paragraph and now the effect is even more noticeable:
The same thing does not happen when the font size is made bigger.
Here's the CSS configuration of the text you can see:
font-family: 'Tahoma', 'Verdana', 'Helvetica', 'Arial', sans-serif;
font-size: 13px;
color: #f4f4f4;
The font picked in the picture was Tahoma. The text has a problem with text shadow:
text-shadow: 0px -1px 0px rgba(0, 0, 0, .5), 0px -1px 5px rgba(0, 0, 0, .2);
As you can see from the CSS, the shadow should only go upward one pixel, but for some reason, as you can see in the pictures, it's also offset to the left by one pixel. This same issue, again, doesn't happen in Firefox. Setting the horizontal distance to 1px will move it 2px away from its current position and will not fix the problem.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Chrome 在适用时使用硬件加速渲染层合成，这可能会导致渲染差异。启用不透明度（或部分半透明）的元素就是这种情况，例如带有阴影的元素。请参阅 https:// https://sites.google.com/a/chromium.org/dev/developers/design-documents/gpu-accelerated-compositing-in-chrome 了解软件和硬件合成之间的差异以及有关该主题的更多详细信息。
Chrome uses hardware-accelerated render layer compositing whenever applicable, which can result in rendering differences. This is the case with opacity-enabled (or otherwise partially translucent) elements, like those with a shadow. See https://sites.google.com/a/chromium.org/dev/developers/design-documents/gpu-accelerated-compositing-in-chrome for the difference between software and hardware compositing and more details on the topic.