CSSは元の色とは異なる色合いになっています

Question

私は背景としてやや高めの画像を持っています... domでは、元のファイルが保存されているものよりも色合いが緑色で表示されます。イメージの背景要素を検査し、そのイメージを再度保存すると元の背景ファイルと同じ色調で保存します。

基本的に、domは私の背景イメージに緑色の色合いを追加しています。ファイルサイズが大きいか何かになることが原因でしょうか？

相続人

.main { 

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

} 

ブラウザここ

image http://i65.tinypic.com/2ik6tj9.png

スルー画像のスクリーンキャップ、元画像

image http://i65.tinypic.com/119t6yt.jpg

奇妙なことが唯一のこのイメージは緑を示していますあなたがブラウザで見るとき。画像を保存すると、画像が緑色でないことがわかります。

Answer 1

http://www.howtogeek.com/70161/my-photos-look-different-on-the-internet-how-can-i-fix-them/

あなたのイメージのカラープロファイルは、おそらくあなたの画像ビューアは、おそらくカラープロファイルをサポートし、別の色を示しているが、その後ディスプレイのカラープロファイルにフォールバックのブラウザでサポートされていません。

ソリューション：

は、画像上のsRGBカラープロファイルを設定します。 Gimpはそれを自動的に行うように求めており、無料です：D

Answer 2

私はHTML/CSSのエキスパートではありません。サンプル画像から、色合いなどが適用されているようには見えません。私は2つの画像を見て、それがしているように見えるものはあなたのイメージを飽和させています。何らかのCMSなどから既存のCSSを変更する場合、残りのコードをチェックして、背景オブジェクトにフィルタが適用されているかどうかを確認することができます。これを参照してください。例です

https://css-tricks.com/almanac/properties/f/filter/

を。彩度フィルタを強制するいくつかのコードがあり、あなたはそれについて知りません。私がこれを言う理由は、レンダリングされた画像の色がすべて異なっていることです。空の青が濃く、木の緑が緑です...海水には緑があります。それらの色を強調している可能性があります...ちょうど考え...

Answer 3

レンダリングモードには何か関係があったと思いますが、問題を再現できません。

div { 
 
    background-image: url("http://oi65.tinypic.com/119t6yt.jpg"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    margin-bottom: 10px; 
 
    width: 300px; 
 
    height: 150px; 
 
} 
 
#d1 { 
 
    -ms-interpolation-mode: nearest-neighbor; 
 
    image-rendering: -webkit-optimize-contrast; 
 
    image-rendering: crisp-edges; 
 
} 
 
#d2 { 
 
    -ms-interpolation-mode: bicubic; 
 
    image-rendering: optimizeQuality; 
 
} 
 
#d3 { 
 
    -ms-interpolation-mode: nearest-neighbor; 
 
    image-rendering: optimizeSpeed; 
 
}

<div id="d1"></div> 
 
<div id="d2"></div> 
 
<div id="d3"></div>

Answer 4

あなたがお使いのブラウザは言及しなかった、それはバージョンです。ソリューションのためにブラウザの接頭辞を付けてコードを試してみることができます。ここで

.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; 
} 

はhttps://jsfiddle.net/6Ljy6qoj/