光栅到PNG编码差异

Question

我的问题是关于暂停Raster到PNG

我将播放光栅转换为png，顺利完成没有问题。

我接下来暂停一下，他们俩看起来都不一样。

我该如何解决？它可以修复吗？

可以在代码中调整某些内容来修复/解决问题吗？

https://jsfiddle.net/m1vs3gp7/

<div style="
        width: 36px;
        height: 36px;

      background-color: rgba(0,0,0,.7);
    background-image: url('https://i.imgur.com/DP1EiiG.png');
        background-repeat: no-repeat;
        background-size: 14px 18px;
        background-position: 50%;
        border-radius: 500px;
        border: 1px solid red;
        cursor: pointer;
    "> </div>

<div style="
        width: 36px;
        height: 36px;

      background-color: rgba(0,0,0,.7);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI2MCAxNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
        background-repeat: no-repeat;
        background-size: 14px 18px;
        background-position: 50%;
        border-radius: 500px;
        border: 1px solid red;
        cursor: pointer;
    "> </div>

<div style="
        width: 36px;
        height: 36px;

      background-color: rgba(0,0,0,.7);
    background-image: url('https://i.imgur.com/ef35w1e.png');
        background-repeat: no-repeat;
        background-size: 14px 18px;
        background-position: 58% 50%;
        border-radius: 500px;
        border: 1px solid red;
        cursor: pointer;
    "> </div>

<div style="
        width: 36px;
        height: 36px;

      background-color: rgba(0,0,0,.7);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIyNiAxNDgxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
        background-repeat: no-repeat;
        background-size: 14px 18px;
        background-position: 58% 50%;
        border-radius: 500px;
        border: 1px solid red;
        cursor: pointer;
    "> </div>