如何修复 PNG 和 GIF 之间的颜色匹配错误？

Question

我有一个网站，其中心有一个大型动画像素艺术 gif。

大 gif 的两侧是一个水平扩展的 div。这些 div 的背景图像是可平铺的 PNG。

这样，“场景”可以填充高达 5736 像素的屏幕宽度，而不会扭曲中心 gif。

问题：浏览器中的 PNG 平铺颜色与 Photoshop 中的不同，因此它们与中心 gif 不匹配。在 macOS 上的 Safari、Firefox、Chrome 中测试。

在 Photoshop 中保存和打开图块和 gif 显示颜色是相同的。但是在浏览器中查看它们（或截取浏览器的屏幕截图）时，它们显然是不同的。

此外，这两种颜色都不是“正确”的颜色 (#080910)。

gif 或 PNG 都没有任何透明度，或者它们之上的任何东西。我有点茫然，不胜感激 - 我觉得我可能错过了一些关于浏览器如何渲染图像的东西。

HTML

<div id="hero">

    <div class="scene tile" id="lefTile"></div>

    <div class="scene" id="centerpiece"></div>

    <div class="scene tile" id="rightTile"></div>

</div>

CSS

#hero {
    width: 5736px;
    margin-left: 50%;
    transform: translateX(-50%);
    background-size: 1736px auto;
}

.scene {
    float: left;
    height: 500px;
}

#centerpiece {
    width: 100%;
    max-width: 1736px;

    background-image: url(img/hero.gif);
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;

}

.tile {
    width: 2000px;
    background-repeat: repeat-x;
    background-size: contain;


#leftTile {
    background-image: url(img/left-tile.png);
    background-position: right bottom;
}

#rightTile {
    background-image: url(img/right-tile.png);
    background-position: left bottom;
}

Answer 1

你可以参考这里的帖子，已经问过了
Color (colour) differences between browsers?

还有可能的原因
・颜色配置文件（sRGB、AdobeRBG 等）
・显示器的温差 (3000k~ etc k=kelvin)
・gif只支持256色？

如果您真的想要显示器上的准确颜色，您可以使用经过 EIZO、NEC 等颜色校准的摄影师、专业视频编辑器的显示器，但它们很贵 :)

但缺点是您只能看到颜色的差异，除非其他人拥有相同的显示器。