4

私はプロパティを持つdivを持っています:

background-color: #327EB2;

ブラウザでページを開くと、別の色が表示されていることに気付きました。画面をキャプチャしてPhotoshopでキャプチャした画像を開くと、キャプチャされたカラーコードが実際には#437BB6であることがわかります。CSSスタイルシートにその色を設定するものは何もありません。

さまざまなモニター、さまざまな色の解像度、さまざまなブラウザー、FF4+からIE8+、Opera、Chrome、Safariなどのバージョンでテストしました...

実際には、モニター、解像度、ブラウザーのバージョンの問題ではないと思います。問題は、表示されている色のコードが実際にはまったく異なることです。

また、Photoshopは「Webセーフカラー」ではない#327EB2について警告しますが、シートにWebセーフでないカラーを使用することが多く、そのような問題が発生したことはないため、これは問題ではないと思います。

**フィドル: http: //jsfiddle.net/286tE/

*アップデート

問題は、divに背景画像と背景色があることです。背景色は、(通常どおり)背景画像の最後のピクセルの色である#327EB2と一致する必要があります。とにかく、私は画像の最後のピクセルから背景色まで異なる色を見ることができます:

http://test.testblueday.eu/test/cbsissue.png

あなたはここのページを見ることができます、問題は左側の「トップマルキ」リストの後に示されています:

http://test.testblueday.eu/test/cbstest.html

すべてのプロパティを表示できるように、プレーンなCSSとJS(圧縮されていない)を残しました。

**アップデート2

私はMacを使用していますが、Windowsでも問題が発生します。

4

2 に答える 2

4

あなたの問題はCSSとは何の関係もありません、問題は画像にあります!

これは、提供された例が余分な背景(CSSを介して「色付け」されたもの)に正しい#327EB2を示しているためであり、CSS部分に問題がないことを知るのに十分です。

Photoshop経由でエクスポートされたファイルで行われる色補正/管理に注意してください。

色を管理/目的の色に戻すことができない場合は、別の解決策が逆の方法で、画像の最後の行に一致するようにCSSの色を変更します。

于 2012-12-12T16:33:28.647 に答える
3

私が見る限り、すべてが正しく機能します。下部の画像の色はコード「#1080b3」です。その画像(gradient_box_emboss.jpg)をダウンロードして、GIMPでcolorpickerを使用して色を取得しました。このようにcssを変更すると:

.embosser {
   background: #1080B3 url('/images/gradient_box_emboss.jpg') right top no-repeat;
   color: white;
   padding: 5px 6px;
}

違いがありません。あなたのサイトをプリントスクリーンしてGIMPに貼り付けると、カラーピッカーはその「間違った」背景の色を表示します#327eb2。質問の画像を開くと、背景の色はです #307db7。これはjpgであり、生データを.jpgに圧縮しているときに一部の色情報が失われたと思います。おそらく、フォトショップで色を取得しようとすると、同様のことが起こります。

画像をある形式から別の形式に変換すると、問題が発生する可能性があります。最も簡単な修正は上記です-背景の色を画像にある色に変更します。

于 2012-12-12T16:40:14.977 に答える