Tailwind半透明色purple-600/50在背景与边框显示不一致问题排查

给<img>元素同时设置Tailwind的bg-purple-600/50背景色和border-purple-600/50边框色时，二者显示颜色不一致，看起来透明度不同，已在Firefox和Safari中测试。

代码示例：

<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" />

请问问题出在哪里？

这是因为图片的内容会叠加在背景色之上，而边框是在元素的最外层绘制的：

• 半透明背景色会被图片内容（哪怕是无透明通道的SVG）叠加混合，视觉上显得更浅
• 半透明边框直接在元素边缘绘制，没有被图片内容覆盖，能完整显示原本的半透明颜色
  二者视觉差异由此产生。

解决方法是给图片套一个容器，将背景色和边框样式转移到容器上，图片放在容器内部，避免背景色被图片内容覆盖：

<div class="h-6 bg-purple-600/50 border-purple-600/50 border-4 rounded-full p-[1px]">
  <img src="/img/logo.svg" class="h-full rounded-full" />
</div>

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