CSS を使って IE 6 で PNG の半透明を有効にする | ヨモツネット
概要 IE 6 で img 要素で埋め込んだ PNG ファイルの半透明を有効にする JS はいろいろありますが、CSS でこれを行うための方法です。 利点として、JS で実現した場合、一瞬グレーの部分が表示されてしまいますが、この方法ではそれがありません。 PNG が読み込まれた時点で半透明が有効になっています。 また、CSS のセレクタを用いて、どの img 要素に対して半透明を有効にするかなどを決めることができます。 さらに、onload 後にドキュメントに appendChild や innerHTML などで追加された PNG ファイルについても、半透明が有効になった状態で追加されます。 動作確認用の demo (IE 6 用) 説明 アルファチャンネルを有効にしたい個所に対して以下のようなCSSを適用します。この例では、#sample の中の img 要素となります。(セレクター
kys-lab.com - このウェブサイトは販売用です！ - リソースおよび情報
このウェブサイトは販売用です！ kys-lab.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、kys-lab.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
IE6用透過png対応策、DD_belatedPNGの使用法と注意点
以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl
IE PNG Fixを使ったら、クリックできない～
年末からのご依頼で、 トップページのデザインを支給していただいて、 それを基に下層ページをデザイン＆HTMLコーディングしました。 かなり繊細なデザインで、 どうしても透過pngを必要とする箇所がありました。 その箇所というのは、 大きな矩形グラデーション画像の上に、 ドロップシャドウ付きの小さなボタン画像を配置、 また、その矩形グラデーション画像の両端にも ドロップシャドウが付けられており、 ブラウザ背景には文様がある、というもので、 ドロップシャドウごと矩形グラデーション画像を切り出す際に 透過pngを使わないと、桁ズレを起こすか、 シャドウまわりのエッジがギザギザになるか、 の状態でした。 透過pngで鬼門になるのがIE6.0なのですが、 それは前にも見つけた、 IE6.0でも透過pngが表示できる 「IE PNG Fix」というものを使いました。 http://www.twinhe
IE6の透過PNGメニューロールオーバー
MENU-1.通常の背景ポジション変更によるロールオーバー MENU-1 MENU-2 MENU-3 高さ40pxのメニューに対し高さ80pxのON-OFFをつなげた画像のpositionを上に40pxずらすことで、画像が変わっているように見せている。 もちろんIE6では画像が透過しないので、背景のグリッドが隠れてしまいます。 HTML <ul class="menu1"> <li><a href="#MENU-1">MENU-1</a></li> <li><a href="#MENU-2">MENU-2</a></li> <li><a href="#MENU-3">MENU-3</a></li> </ul> CSS ul { list-style: none; width: 110px; margin: 0; padding: 0; } .menu1 a { display: block
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
今更だが現時点での透過PNGのIE6対策のまとめをしてみる の巻
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユンサンの／／YungSang's: 透過PNG と IE と IE7
lllcolor.com
IEバグ対策「png画像の透過処理」