html - 透明なピクセルはPCとiPhoneで異なってレンダリングされます

Question

Photoshopで生成された透明ピクセル。

PCでは予想どおりに見えますが、iPhoneでは暗く見えます。

div {
    background-image: url('/images/pixel-white.png');
}

ブラウザ：

PC-Chromeバージョン22.0.1229.96m

iPhone-21.0.1180.82

ピクセル：PNG-24 /透明レイヤー：rgb 255 255 255、透明60％

質問：このピクセルをPC、iPhone、その他すべてのブラウザで同じように表示するにはどうすればよいですか？

添加：

ここに画像の説明を入力してください

score 3 · Accepted Answer

ただ使用していない非常に特別な理由があるはずです：

background: rgba(255,255,255,0.6);

または似たようなもの。

(これはコメントではありません。を使用してrgbaください。)

score 2 · Accepted Answer

このピクセルを PC と iPhone で同じように表示するにはどうすればよいですか?

できません。ブラウザーだけでなく、オペレーティングシステムとディスプレイデバイス、およびデバイスを使用するユーザーがディスプレイを構成する方法にも依存します。

これは、特にここで異なるコンピューターシステムを比較しようとしているため、イメージ内またはサーバー側から制御できないものです。

score 0 · Accepted Answer

すべてのブラウザー（IE6 +）との100％の互換性を実現するために、次の投稿からの推奨事項を使用しました。

上記のトピックはモバイルSafariブラウザー専用ですが、透明ピクセルを幅/高さの1ピクセル以上に設定することで、すべての主要なブラウザー（IE6 +）の外観に一貫性がないという問題が解決されることを確認します。

言い換えると、PNGのRFC（http://www.ietf.org/rfc/rfc2083.txt ）に従って、すべてのブラウザで期待されるように見えるように、透明なピクセルは少なくとも2pxの幅/高さである必要があります。

3 に答える 3