IE6で不透明な背景のPNG画像を解決CSSの問題

時には、半透明の効果は、Vistaが勝って、特に後に、半透明の効果がより尊重され、カラーページ数が増加します。多くの画像フォーマットでのWebブラウジングはPNG形式とGIF形式は、半透明の効果を得ることができ、使用することができますが、半透明のGIF形式は限られており、最も一般的な方法は、PNG形式の画像を使用することで、これまで歪みの広い範囲になります。しかし残念ながら、それは、Internet Explorer 6でとバージョン（少なくとも直接的にはサポートされません）以下のPNG半透明性をサポートしていません。幸いなことに、Microsoftはこれらのブラウザに追加機能を内蔵し、この半透明効果を実装するために私たちを助けることができます。

プログラムコード

本体{背景：黒URL（bg.jpg）なしリピート0。テキスト整列：センター; } DIV {幅：80％。マージン：0自動; テキスト整列：左; パディング：7px; 背景画像：のURL（tran.png）。ボーダー：3px固体#FFF; }

第二に、独自のフィルタ効果を提供し、Internet Explorerの実装ではInternet Explorer 6の規定は、彼のフィルターを通して：PROGID：DXImageTransform.Microsoft.AlphaImageLoaderのリアライズ、今財産に関する知識は以下のとおりです。

プログラムコード

有効：オプション。ブール値（ブール値）。検索フィルタがインストールまたは活性化されます。真|偽真：デフォルト値。フィルタが有効。偽：フィルタが無効になっています。
sizingMethod：オプション。文字列（String）を。フィルタ対象画像を設定または取得するアクションオブジェクトコンテナの境界に表示さ。クロップ：オブジェクトのサイズに合わせて画像を切り取ります。画像：デフォルト。画像のサイズを収容するために、境界オブジェクトのサイズを増加または減少させます。スケール：オブジェクトの境界のサイズに合わせて画像を拡大縮小。SRC：必須。文字列（String）を。背景画像を指定するには、絶対的または相対URLアドレスを使用してください。このパラメータを省略すると、フィルターが動作しません。
特徴：有効：読み取りと書き込み。ブール値（ブール値）。enabledプロパティを参照してください。sizingMethod：読み書き可能。文字列（String）を。sizingMethodプロパティを参照してください。SRC：読み書き可能。文字列（String）を。src属性を参照してください。
説明：オブジェクトコンテナの境界において、オブジェクトの背景とコンテンツの間の画像を示します。そして、このカットやチェンジ操作のサイズの画像を提供しています。あなたは、透明性の0％から100％までPNG（Portable Network Graphics）形式をロードした場合、それはまた、提供されます。透明性PNG（ポータブルネットワークグラフィックス）画像形式は、テキストを選択防ぐことはできません。言い換えれば、あなたは（Portable Network Graphics）形式の画像をPNGにコンテンツの後ろを表示するには、完全に透明な領域を選択することができます。

そのため、Internet Explorer 6で、今、私たちはこれらの言葉を持っています：

プログラムコード

* HTML DIV {フィルタ：プログラムID：DXImageTransform.Microsoft.AlphaImageLoader（有効=真、sizingMethod =スケール、SRC = "tran.png"）。背景：なし。}

注：ここでは、「*」CSSハックを使用して、CSSハックのInternet Explorer 6は、DOM構造Ineternet Explorer 6を、デフォルトのHTMLノード*親にユニークであり、それは、標準のHTML DOM構造であり、ルートノード。したがって、上記のCSSルールは、Internet Explorer 6のを認識しています。
このように、我々は、などのInternet Explorer 6,7、Firefoxの、オペラ、最も一般的に使用されるブラウザは、半透明の効果を達成しています。
他の三つの例が、上記のすべての状況は時々我々はそのようなこの絵下記のロゴとして、PNGマスクで行います、PNGで背景を行うには、我々は、グラデーション効果を達成するためにPNGマスクを使用することができます。私たちは以下のように使用することができますこの方法は、HTMLスニペット達成され、

プログラムコード

注：完全にInternet Explorer 6の位置決めを補助するために、容器内の<div>要素であり、そのようなアプローチを満たすために、<スパン>上記<img>タグを覆うように透光性を達成します。今、私たちはただのような自分の位置に関する設定する必要があります。

プログラムコード

DIV {位置：相対;}スパン{フィルタ：プログラムID：DXImageTransform.Microsoft.AlphaImageLoader（有効=真、sizingMethod =スケール、SRC = 'filter.png'）。フロート：左; 幅：200pxの。高さ：100pxに。位置：絶対; トップ：0; 左：0; }

しかし、Firefoxはこのプロパティをフィルタリングしないで、私たちは、Firefoxのための単一のスタイルをカスタマイズする必要があります。

プログラムコード

div>のスパン{背景：URL（filter.png）。}

だから我々は、半透明の効果を達成するためにマスクを使用することができます
が、あまりにも多くの場所には、このようなマスキング効果を実装する必要がある場合、その後、上記のアプローチは、に加えて、最初にすべてのことは、冗長なHTMLタグを持って、最善ではありません絶対的および相対的な位置決めを使用しています。私たちは、コードの上に閉じた場合、より効果的であろう。ここでは、JS囲まれた次のコードを使用することができます

プログラムコード

<！ - [場合LT IE 7]> <スクリプト言語= "JavaScriptを">機能correctPNG（）//正しく勝つIEでPNGの透明性を扱う5.5＆6 {VAR arVersion = navigator.appVersion.split（ "MSIE"） {VAR IMG =文書（; I <document.images.length I I = 0 VAR）のためのVARバージョン= parseFloatは（arVersion [1]）（（バージョン> = 5.5）&&（document.body.filters））であれば{ .images [I] VAR imgName = img.src.toUpperCase（）IF（imgName.substring（imgName.length-3、imgName.length）== "PNG"）{VAR imgID =（img.id）？"ID = '" img.id "'"： "" VAR imgClass =（img.className）？"クラス= '" img.className "'"： "" VAR imgTitle =（img.title）？"タイトル= '" img.title "'"： "タイトル= '" img.alt "'" VAR imgStyle = "表示：インラインブロック;" img.style.cssText IF（img.align == "左"）imgStyle = "フロート：左;" imgStyle場合（img.align == "右"）imgStyle = "フロート：右;" imgStyle IF（img.parentElement.href）imgStyle = "カーソル：手;" imgStyle VAR strNewHTML = "<スパン" imgID imgClass imgTitle "スタイル= \" " "幅：" img.width" PX; 高さ：」img.height "PX;" imgStyle ";" "フィルタ：プログラムID：DXImageTransform.Microsoft.AlphaImageLoader" "（SRC = \ '" img.src "\'、sizingMethod = '規模'）; \"> < /スパン>」img.outerHTML = strNewHTML iは= I-1}}}} window.attachEvent（ "オンロード"、correctPNG）。</ SCRIPT> <！[endifの] - > img.style.cssText IF（img.align == "左"）imgStyle = "フロート：左;" imgStyle場合（img.align == "右"）imgStyle = "フロート：右;" imgStyle IF（img.parentElement.href）imgStyle = "カーソル：手;" imgStyle VAR strNewHTML = "<スパン" imgID imgClass imgTitle "スタイル= \" " "幅：" img.width" PX; 高さ：」img.height "PX;" imgStyle ";" "フィルタ：プログラムID：DXImageTransform.Microsoft.AlphaImageLoader" "（SRC = \ '" img.src "\'、sizingMethod = '規模'）; \"> < /スパン>」img.outerHTML = strNewHTML iは= I-1}}}} window.attachEvent（ "オンロード"、correctPNG）。</ SCRIPT> <！[endifの] - > img.style.cssText IF（img.align == "左"）imgStyle = "フロート：左;" imgStyle場合（img.align == "右"）imgStyle = "フロート：右;" imgStyle IF（img.parentElement.href）imgStyle = "カーソル：手;" imgStyle VAR strNewHTML = "<スパン" imgID imgClass imgTitle "スタイル= \" " "幅：" img.width" PX; 高さ：」img.height "PX;" imgStyle ";" "フィルタ：プログラムID：DXImageTransform.Microsoft.AlphaImageLoader" "（SRC = \ '" img.src "\'、sizingMethod = '規模'）; \"> < /スパン>」img.outerHTML = strNewHTML iは= I-1}}}} window.attachEvent（ "オンロード"、correctPNG）。</ SCRIPT> <！[endifの] - > imgStyle場合（img.align == "右"）imgStyle = "フロート：右;" imgStyle IF（img.parentElement.href）imgStyle = "カーソル：手;" imgStyle VAR strNewHTML = "<スパン" imgID imgClass imgTitle "スタイル= \" " "幅：" img.width" PX; 高さ：」img.height "PX;" imgStyle ";" "フィルタ：プログラムID：DXImageTransform.Microsoft.AlphaImageLoader" "（SRC = \ '" img.src "\'、sizingMethod = '規模'）; \"> < /スパン>」img.outerHTML = strNewHTML iは= I-1}}}} window.attachEvent（ "オンロード"、correctPNG）。</ SCRIPT> <！[endifの] - > imgStyle場合（img.align == "右"）imgStyle = "フロート：右;" imgStyle IF（img.parentElement.href）imgStyle = "カーソル：手;" imgStyle VAR strNewHTML = "<スパン" imgID imgClass imgTitle "スタイル= \" " "幅：" img.width" PX; 高さ：」img.height "PX;" imgStyle ";" "フィルタ：プログラムID：DXImageTransform.Microsoft.AlphaImageLoader" "（SRC = \ '" img.src "\'、sizingMethod = '規模'）; \"> < /スパン>」img.outerHTML = strNewHTML iは= I-1}}}} window.attachEvent（ "オンロード"、correctPNG）。</ SCRIPT> <！[endifの] - > imgStyle VAR strNewHTML = "<スパン" imgID imgClass imgTitle "スタイル= \" " "幅：" img.width" PX; 高さ：」img.height "PX;" imgStyle ";" "フィルタ：プログラムID：DXImageTransform.Microsoft.AlphaImageLoader" "（SRC = \ '" img.src "\'、sizingMethod = '規模'）; \"> < /スパン>」img.outerHTML = strNewHTML iは= I-1}}}} window.attachEvent（ "オンロード"、correctPNG）。</ SCRIPT> <！[endifの] - > imgStyle VAR strNewHTML = "<スパン" imgID imgClass imgTitle "スタイル= \" " "幅：" img.width" PX; 高さ：」img.height "PX;" imgStyle ";" "フィルタ：プログラムID：DXImageTransform.Microsoft.AlphaImageLoader" "（SRC = \ '" img.src "\'、sizingMethod = '規模'）; \"> < /スパン>」img.outerHTML = strNewHTML iは= I-1}}}} window.attachEvent（ "オンロード"、correctPNG）。</ SCRIPT> <！[endifの] - >

このコードは、のみのみ、Internet Explorer 6で実行されます。今、私たちは、Internet Explorer 7とFirefoxと同じコードを書くことができます。

プログラムコード

プログラムコード

DIV {背景：URL（logo.jpg）ノー・リピート; }

クロスブラウザのPNGの問題を解決した後、我々はより複雑で、より鮮やか結果ページを達成するためにそれを使用することができます。

技術的な男性の料理人

オリジナルの記事は、0公表・ウォンの賞賛2 ・ビュー8690を

プライベートの手紙の懸念

IE6で不透明な背景のPNG画像を解決CSSの問題

おすすめ