CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする | ヨモツネット
IE 6 で背景に指定した png のアルファチャンネルを有効にするための JavaScript がいくつかありますが、それとほぼ同じことを CSS のなかで行うコードを書いてみました。 この方法を使うことの利点 / 欠点は 利点 JavaScript で背景の png を AlphaImageLoader に置き換える場合はページの読み込み完了後に置き換わるため、一瞬 png の半透明部分がグレーになりますが、この方法はそれがありません。 JavaScript で同じことを行う場合は IE のために Web ページで読み込む JavaScript のライブラリを増やさなければいけないかもしれませんが、この方法はそれがありません。 背景にする png ファイルへのパスを相対パスで扱えます。 欠点 CSS に IE の独自実装を記述するので CSS 自体は Valid ではなくなります。 実
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
IE PNG Fix - TwinHelix
IE PNG Fix 2.0 Alpha 4 This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! Full CSS background positioning and repeat are supporting (including CSS sprites). It requires only one line in your CSS file, and no changes to your website HTML. <IMG> tags and background images are both supported. Script License Ag
IE PNG Fix Alpha 2を使ってみた。 | ちぷろぐ
透過をきれいに使ったウェブデザインいろいろ - DesignWalker ↑を見ていて、いいな！私も透過PNG使いたいな！と久しぶりにデザインがえを考えてます。 上のサイトの中でも特にSilverbackの画面の横幅を変えた時の葉の重なり具合が凄いキュートだと思って、こういうので何かできないかしら？と。 あんまり気付かれない感じの仕事なんだけど、なんかそこに萌えを感じます。 The portfolio of Bryan Katzelにいたっては、神業！！としか思えない！！ 頭良いなあ、考えた人！ で、こういうサイトの透過PNGを使った効果ははIE6以下ではちゃんと見えないのよね。 もったいない。 なのに、IE6のシェアはまだまだぶっちぎり1位なんよね。 そこで、リニューアルに向けての勉強がてら、IE6でも透過PNGを使えるようになる「IE PNG Fix」を試しに使ってみた。 一
NLOG - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
![アルファ画像を扱うalphafilter.jsライブラリ[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過PNGをIE6以下のバージョンで綺麗に表示する方法 - DesignWalker
