Tailwind 不透明颜色在背景和边框上呈现的效果不一样

Question

在元素的背景和边框上使用 Tailwind 颜色

purple-600/50

，它们不会呈现相同的颜色。就像不透明度不一样（在 Firefox 和 Safari 上测试）。请参阅https://play.tailwindcss.com/KrjtSAezXQ。

<img src="/img/logo.svg" class="h-6 bg-purple-600/50 border-purple-600/50 border-4 rounded-full" />

• 但是，检查 css 会显示相同的规则：

background-color: rgba(147, 51, 234, 0.5);
border-color: rgba(147, 51, 234, 0.5);

• 所使用的图像似乎没有固有的背景不透明度，或者在没有 css 不透明度的情况下也会发生同样的情况：

<img src="/img/logo.svg" class="h-6 bg-purple-600 border-purple-600 border-4 rounded-full" />

我错过了什么？

Answer 1

默认情况下，边框绘制在背景的顶部。因此，边框颜色会叠加在背景颜色上，从而产生颜色差异。

如果您希望在两种情况下使用相同的颜色，您可以考虑：

• 通过

  background-clip: padding-box

  类使用

  bg-clip-padding

  来停止在边框下方绘制背景颜色：

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<img src="https://play.tailwindcss.com/img/logo.svg" class="h-6 bg-purple-600/50 border-purple-600/50 border-4 rounded-full bg-clip-padding" />

• 用图像周围的填充来模拟边框：

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<img src="https://play.tailwindcss.com/img/logo.svg" class="h-6 bg-purple-600/50 p-[4px] rounded-full" />