左側の画像が透明性なしで右側の背景色にシームレスに溶け込むようにWebサイトを設計しました(色は画像の右端の境界線で背景に単純に一致します)。画像のように、透明度のあるカットアウトを作成することは非常に難しいため、このソリューションはうまく機能する傾向があります(理由については例を参照してください)。
画像の右端は#d0d9e0
PhotoshopCS5による16進色で、CSSを適切に記述しています。
body {
background-color:#d0d9e0;
background-image:url('image.jpg');
background-size:auto 100%;
background-repeat:no-repeat;
}
Webkitブラウザ(Chrome、Safari)では、画像が背景と美しく調和し、素晴らしい結果が得られます。Geckoブラウザ(Firefox)およびTridentブラウザ(IE)では、画像または背景のいずれかで色が正しくレンダリングされず、アマチュアに見えます。
このユニークな問題を説明するために、ここでライブテストの例を見ることができます:http://ezrahub.com/missmaryland/
別のブラウザを調べて、私の欲求不満がどこから来ているのかを見つけてください。画像の透明度を使用する以外にこれを修正する方法はありますか(ここでイライラする理由がわかります)?GeckoとWebkitのレンダリング画像は異なることは知っていますが、真っ直ぐな色の不正確さの言い訳は考えられません。AGHHHHHH