Html CSS正在将背景色转换为与原始颜色不同的色调

我有一个像样的高清图像作为背景。。。 在dom中，文件显示的颜色比原始文件保存时的颜色更绿。当我检查图像背景元素并再次保存该图像时。它保存为与原始背景文件相同的色调

基本上dom是在我的背景图像中添加一个绿色色调。可能是因为文件太大还是什么

.main {

background-image: url("MainBackground.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;

}

这是通过浏览器显示的图像的屏幕盖

这里是原始图像

奇怪的是，只有在浏览器中查看时，此图像才会显示为绿色。如果保存图像，您可以看到图像的绿色变浅。

浏览器可能不支持图像中的颜色配置文件，然后浏览器会回退到显示颜色配置文件，而图像查看器可能支持颜色配置文件并显示不同的颜色

解决方案：

在图像上设置sRGB颜色配置文件。Gimp要求自动执行此操作，并且是免费的：D

浏览器可能不支持图像中的颜色配置文件，然后浏览器会回退到显示颜色配置文件，而图像查看器可能支持颜色配置文件并显示不同的颜色

解决方案：

---

在图像上设置sRGB颜色配置文件。Gimp要求自动执行，并且是免费的：D

我不是HTML/CSS专家，但已经与它合作过很多次。从您的示例图像中，似乎没有应用色调或任何东西。我看了这两张图片，它似乎在使你的图片饱和。如果您正在修改某种CMS或其他类型的现有CSS，您可能会检查代码的其余部分，以查看是否有一个过滤器应用于背景对象。见此：

---

这就是一个例子。可能有一些代码强制使用饱和过滤器，而您对此一无所知。我之所以这么说，是因为渲染图像中的所有颜色都是不同的——天空中更深的蓝色，树叶中更绿的绿色。。。海水中有一些绿色，所以当它以某种方式饱和时，它可能会强调那些颜色。。。只是一个想法…

我不是HTML/CSS专家，但已经和它打过很多交道。从您的示例图像中，似乎没有应用色调或任何东西。我看了这两张图片，它似乎在使你的图片饱和。如果您正在修改某种CMS或其他类型的现有CSS，您可能会检查代码的其余部分，以查看是否有一个过滤器应用于背景对象。见此：

---

这就是一个例子。可能有一些代码强制使用饱和过滤器，而您对此一无所知。我之所以这么说，是因为渲染图像中的所有颜色都是不同的——天空中更深的蓝色，树叶中更绿的绿色。。。海水中有一些绿色，所以当它以某种方式饱和时，它可能会强调那些颜色。。。只是想…

我想可能是渲染模式造成的，但我无法复制这个问题

div{
背景图像：url（“http://oi65.tinypic.com/119t6yt.jpg");
背景大小：100%100%；
背景重复：无重复；
边缘底部：10px；
宽度：300px；
高度：150像素；
}
#d1{
-ms插值方式：最近邻；
图像渲染：-webkit优化对比度；
图像渲染：清晰的边缘；
}
#d2{
-ms插值方式：双三次插值；
图像渲染：优化质量；
}
#d3{
-ms插值方式：最近邻；
图像渲染：优化速度；
}

---

我认为渲染模式可能与此有关，但我无法复制该问题

div{
背景图像：url（“http://oi65.tinypic.com/119t6yt.jpg");
背景大小：100%100%；
背景重复：无重复；
边缘底部：10px；
宽度：300px；
高度：150像素；
}
#d1{
-ms插值方式：最近邻；
图像渲染：-webkit优化对比度；
图像渲染：清晰的边缘；
}
#d2{
-ms插值方式：双三次插值；
图像渲染：优化质量；
}
#d3{
-ms插值方式：最近邻；
图像渲染：优化速度；
}

---

您没有提到您的浏览器及其版本。您可以尝试以下带有浏览器前缀的代码作为解决方案

.main {
    width: 400px;
    min-height: 300px;
    background-image: url("http://i65.tinypic.com/119t6yt.jpg");
    background-repeat: no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

---

这是此代码的输出

您没有提到您的浏览器及其版本。您可以尝试以下带有浏览器前缀的代码作为解决方案

.main {
    width: 400px;
    min-height: 300px;
    background-image: url("http://i65.tinypic.com/119t6yt.jpg");
    background-repeat: no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

---

这是此代码的输出

您是否确认这会在多个浏览器中发生？您测试了哪些浏览器？我无法查看图像-可能是图像保存的颜色配置文件有问题吗？您是否确认这种情况会在多个浏览器中发生？您测试了哪些浏览器？我无法查看图像-可能是图像保存的颜色配置文件有问题吗？非常感谢！我使用photoshop并将图像保存到web上。在Photoshop中，我可以节省用于浏览器的颜色空间。我与CMYK合作，并将图像导出到sRGB。现在一切都很完美。非常感谢！我使用photoshop并将图像保存到web上。在Photoshop中，我可以节省用于浏览器的颜色空间。我与CMYK合作，并将图像导出到sRGB。现在一切都很完美。