0

左側の画像が透明性なしで右側の背景色にシームレスに溶け込むようにWebサイトを設計しました(色は画像の右端の境界線で背景に単純に一致します)。画像のように、透明度のあるカットアウトを作成することは非常に難しいため、このソリューションはうまく機能する傾向があります(理由については例を参照してください)。

画像の右端は#d0d9e0PhotoshopCS5による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

4

1 に答える 1

1

違いは、さまざまなブラウザがカラー管理されたコンテンツを処理する方法にあります。ファイルに含まれているPhotoshopICCプロファイルは、ブラウザによって解釈が異なります(または無視されます)。

私の推測では、[ファイル]> [名前を付けて保存]を使用してビットマップを保存しており、[ファイル]> [Webおよびデバイス用に保存]を使用すると、期待どおりの結果が得られます。

于 2012-07-31T20:32:20.427 に答える