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

Question

我的网站中心有一个单独的大型动画像素艺术品。

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

这样“场景”可以在不扭曲中心gif的情况下将屏幕宽度填充到5736px。

问题：浏览器中的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

你可以参考这里的主题，它已经被问过了

也可能是原因 ·颜色配置文件（sRGB，AdobeRBG等）
·显示器的温差（3000k~et k =开尔文）
·gif只支持256色？

如果您真的想在显示器上获得准确的颜色，您可以使用显示器为摄影师，专业视频编辑器，这些编辑器可以从EIZO，NEC等进行颜色校准，但价格昂贵：）

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