browser - ネイティブにサポートしていないブラウザーで PNG 透過性を機能させるにはどうすればよいですか?

Question

私たちの (最愛の) デザイナーは、アプリケーションで使用する透明な背景を持つ PNG ファイルを作成し続けています。PNG のこの機能が「古い」ブラウザでも機能することを確認したいと思います。最善の解決策は何ですか?

以下の編集

@mabwi & @syd - PNG の使用に同意するかどうかは問題ではありません。これは私が解決しなければならない問題です！

@Tim Sullivan - IE7.js はかなりクールに見えますが、他のすべての変更をアプリケーションに導入したいとは思いません。PNGの問題のみを修正するソリューションが欲しいです。リンクをありがとう。

score 5 · Accepted Answer

ここで非常に良い解決策と思われるものを見つけました: Unit Interactive -> Labs -> Unit PNG Fix

update Unit PNG は、NETTUTS の PNG 修正オプションのリストにも掲載されています

彼らのウェブサイトからのハイライトは次のとおりです。

非常にコンパクトな JavaScript: 1kb 未満!
IE のフィルター属性によって引き起こされるいくつかの対話性の問題を修正します。
img オブジェクトと background-image 属性で機能します。
自動的に実行されます。クラスを定義したり、関数を呼び出したりする必要はありません。
自動幅要素と自動高さ要素を許可します。
展開が非常に簡単です。

score 5 · Accepted Answer

background-positionおよび-repeat!をサポートするIE PNG Fix 2.0

また、Photoshop や GIMP で信じられていることとは反対に、完全なアルファ透明度を備えたパレット化された 8 ビット PNG も存在します。これらは IE6 でより劣化します。透明度を 1 ビットに削減するだけです。pngquantを使用して、24 ビット PNG からそのようなファイルを生成します。

score 2 · Accepted Answer

2

IE7.jsは、IE6 で PNG (透明度を含む) をサポートします。

于 2008-08-13T19:12:56.477 に答える

score 2 · Accepted Answer

@ボス

表示しようとしているすべてのファイル (およびそれぞれのサイズ) を正確に把握していれば、それで問題ありません。その CSS ファイルを維持するのは大変な作業ですが、可能だと思います。非常に一般的な目的で透過 PNG を使用したい場合: a) 任意の背景で機能するアイコン (サイズが異なる可能性がある) などの付随的なグラフィック、および b) 背景の繰り返し。それからあなたはめちゃくちゃです。私が試したすべての回避策は、ある時点でつまずきにぶつかりました (背景が透明なときにテキストを選択できない、時々画像が奇抜なサイズで表示されるなど)。 gifに戻す必要があります。

私のアドバイスは、PNG透過ハックを試してみることですが、同時にそれが完全ではないことを理解してください. 私が最近行っていることは、IE6 ユーザーがサイトに初めてアクセスしたときにポップアップを表示し、ブラウザーが古く、最新の Web サイトに必要な機能が提供されていないことをフレンドリーに思い出させることです。ブラッディウェルアップグレードを行うと、当サイトとインターネット全体からより良い体験を得ることができます。

score 2 · Accepted Answer

.png を使用してサイトを作成しようとして失敗しましたが、それだけの価値はありません。サイトが遅くなり、100% 機能しないハックを使用します。これはいくつかのオプションに関する優れた記事ですが、私のアドバイスは、IE6 をサポートする必要がなくなるまで、GIF を機能させる方法を見つけることです。または、IE6 のエクスペリエンスを低下させるだけです。

score 2 · Accepted Answer

IE6 で PNG を使用することは、他のどのブラウザーよりも難しいことはほとんどありません。JavaScript を使用せずに CSS ですべてをサポートできます。このハックは以前に見たことがあります...

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;
}

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}

これが有効な CSS かどうかはわかりませんが、サイトによってはそれほど問題にならない場合もあります。

(最初の画像の URL はスタイルシートのディレクトリに基づいており、2 番目の画像は表示されているページのディレクトリに基づいていることに注意してください。したがって、それらが一致しないのはなぜですか)

score 0 · Accepted Answer

すべてのブラウザが PNG-8 をサポートしていると思います。アルファブレンドされていませんが、透明な背景があります。

score 0 · Accepted Answer

私は間違っているかもしれませんが、IE6以下はPNGファイルで透明化を行わないだけだと確信しています。

あなたはそうです、そしてあなたはそうではありません。

IE6 は、それらをネイティブにサポートしていません。

ただし、IE はクレイジーなカスタム javascript/css および COM オブジェクトをサポートしています (これは、最初に XmlHttpRequest を実装した方法です)。

これらのハックはすべて、基本的に次のことを行います。

すべてのpng画像を見つける
directx 画像フィルターを使用してそれらを読み込み、IE が理解できる形式で透明な画像を生成します。
画像をフィルター処理されたコピーに置き換えます。

score 0 · Accepted Answer

考慮すべきことの 1 つは、電子メールクライアントです。多くの場合、PNG-24 透過性が必要ですが、Outlook 2003 では IE6 を使用するマシンを使用しています。メールクライアントは、CSS または JS トリックを許可しません。

これを処理する良い方法があります。 http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

score 0 · Accepted Answer

画像を Fireworks から PNG-8 としてエクスポートすると、gif 画像と同じように動作します。そのため、くすんだグレーに見えることはありません。透明度は透明度になりますが、他のブラウザーのように完全な 24 ビットの美しさはありません。

問題を完全に解決することはできないかもしれませんが、少なくとも再エクスポートするだけで途中までは解決できます。

score -1 · Accepted Answer

私は間違っているかもしれませんが、IE6以下はPNGファイルで透明化を行わないだけだと確信しています。

私が使用する2つの「ソリューション」があります。透明な GIF ファイルを作成してどこでも使用するか、IE 6 以前の条件付きスタイルシートで使用します。2番目は、背景などとして使用している場合にのみ機能します.

browser - ネイティブにサポートしていないブラウザーで PNG 透過性を機能させるにはどうすればよいですか?

11 に答える 11

Related

Reference