- ベストアンサー
IE6以前の透過png表示について
chikottoの回答
- chikotto
- ベストアンサー率46% (23/50)
ここでは参考になりませんか？ 私はいつもこれを使っています。 過PNGをIE6以下のバージョンで綺麗に表示する方法 http://www.designwalker.com/2006/12/transparent-png.html 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる http://www.designwalker.com/2006/12/transparent-png2.html またIE8もでましたし、IE6はそろそろ無視してもいいんじゃないかとも思います。 あとpngではなく透過gifでできるものならそっちがいいですけどね… gifだときれいにいかないのでpng使っているんでしょうけど。
関連するQ&A
- IE6で透過pngを表示させる方法
いつもお世話になっています。 マウスオーバーで画像Aの上に画像Bが表示されるというjavascriptを作りました。画像BはAに重なるので、 http://allabout.co.jp/internet/hpcreate/closeup/CU20040510A/ で教えてもらったposition: relative;、position: absolute;のCSSを使って配置し、javascriptでマウスオーバー・アウトさせています。 無事うまくいったのですが、Bが透過pngなので、IE6で表示が乱れます。そこでこちらで似たような質問を検索し、http://www.koikikukan.com/archives/2007/08/14-015513.php のpngfix.jsを使うのだと知りました。 早速ダウンロードし、htmlのheadに <!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]--> を書き、htmlと同じ階層にpngfix.jsをアップロードしましたが、全然ダメでした。何を間違ってるんでしょうか？自分でもしや？と思うことは ・position: relative;、position: absolute; を使っている ・画像Aの上にBがマウスオーバー・アウトするjavascriptは外部ファイルにしている ・IE6のスタンドアローン版でチェックした(ただこれは正規のIE6を使用している人に見てもらってやはり透過していないと確認済です) 以上です。制作環境はWinXP、Dreamweaver8です。 このpngfix.jsを使用する方法がダメだったらjavascriptで作っている部分をFLASHで作り直すしかないと思っていますが、透過pngはFLASHであればIE6でも表示されるのでしょうか？ 長くなりましたが、お知恵をお貸りできれば助かります！知識がなくすみません…。
- ベストアンサー
- CSS
- IEブラウザはpngの透過画像は透過にならないのが仕様でしょうか？
IEブラウザはpngの透過画像は透過にならないのが仕様でしょうか？ IE6でpngの透過画像を表示させると、透過になっていませんでした。 FireFoxやサファリは透過になります。 仕方がないので、画像をgifの透過にしましたが、 このようにブラウザによって、gif, jpeg, pngの仕様は異なりますか？ もうIE6は見捨てたくなります。
- ベストアンサー
- CSS
- 透過pngとie6について
ウェブの職業訓練に通っております。 現在課題製作中で、透過pngもしくはcssのアルファ？記述で画像を透明にしようと思っています。 色々調べて、透過pngにさらに opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; というcss記述を加えてあります。 また、unitpngfix.jsへのリンクも貼りました。 自分のパソコン（mac,safari）ではどちらもきいていて、透過pngの画像がさらに薄く表示されています。 彼のパソコン（win,IE6.6）で見たところ、どちらかがきいていません。 が、透過はされています。（不透明にはなっていないです。） 結果的には、どっちかがきけばOKなのですが、 この状態で大丈夫でしょうか？全てのブラウザに対応出来ますか？ よろしくお願い致します。
- 締切済み
- CSS
- 透過PNGをIE6に適用させたい
透過PNGをIE6に適応するため、DD_delatedPNGというjavascriptを使おうと思ってコーディングしたのですが、うまく透過されません。 コードは <!--[if lte IE 6]> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script> <script type="text/javascript"> DD_belatedPNG.fix('#header_box_r li'); </script> <![endif]--> と<head>の中に書きました。「#header_box_r li」というidに指定した背景画像にjavascriptを適用させIE6でも背景画像を透過させたいのです。 この他にも必要なコードがあるのでしょうか？IETesterで試すと、「DD_belatedが適用されていません。」とでます。コードを間違って記入しているのでしょうか？ どなたか、教えてください。
- ベストアンサー
- JavaScript
- 透過PNGをIE6へ、かつYoutubeの動画
IE6で透過PNGを使わなければならず、alphafilter.jsにしようかと思っていました。 http://blog.webcreativepark.net/2007/02/01-233315.html しかしこのjsを読み込むとYoutubeの動画を貼り付けた時に、IE6でページ内にあるリンク(テキストリンク)をクリックできないという状況に陥りました。透過PNGは<img>タグで、及びCSSの背景で使用しています。 何か良い対策がありましたら教えていただけますでしょうか。
- ベストアンサー
- JavaScript
- iepngfix.jsでPNGを透過させたいがIE6/7で表示が不正
iepngfix.jsでPNGを透過させたいがIE6/7で表示が不正 サイト内に透過PNGを何点か使用したく、かつIE6に対応する必要があるため、上記「iepngfix.js」を導入しました。 divボックスの背景に敷いたPNG画像は無事に透過されましたが、そのボックスの中にimgタグで配置したリンクボタンの表示が一部不正です。 具体的には、IE6および7にて添付画像のような状態になります。8および他のブラウザは問題ないようです。 マークアップ設定としては、divのcontentsボックスに透過PNGの背景を指定、その中にリストボタンを並べるためのcontents_headlistボックスを配置、その中にaタグでリンクを設定した透過PNGボタンを配置しています。 関連部分のおおまかな設定は以下のとおりです。 body：全面にgif画像（透過なし）を敷き詰め .contents：幅と高さを指定、透過pngをno-repeatで配置、「behavior: expression(IEPNGFIX.fix(this));」「overflow:hidden;」を付加 .contents_headlist：contentsボックス内に配置、幅と高さを指定、左にフロート、パディング指定、「behavior: expression(IEPNGFIX.fix(this));」付加 .contents_headlist内に設置したimg：幅と高さを指定、alt属性指定、リンク付加、「style="behavior: expression(IEPNGFIX.fix(this));」付加 IE6の表示でも、透過部分のグレー表示が見られないので透過自体はされていると思います。 できればiepngfix.jsを使用したままなんとかしたいのですが、iepngfix.js自体のバグか何かならば乗り換えもやむなしと考えています。 不明点等あれば追記しますので、よろしくお願いいたします。
- ベストアンサー
- HTML
- IE8でのフェードする要素のpng画像透過
こんにちは。 jQueryでわからないことが出てきましたので質問させていただきます。 JavaScriptにもさほど詳しいわけでもないので、分からずに困っております。 添付の図を見ていただいくとおそらく状況がわかるとは思うのですが、 グローバルメニューにオンマウスでメガメニューを表示させたいと思っております。 メガメニューの背景は透過pngで 下のコンテンツ部分がうっすら見えるようにしたいと思っております。 しかしIE8で見ると、メガメニュー部分の透過が効いておらずにグレーに表示されます。 また、透過pngにしている画像の周りに黒い線が表示されてしまいます。 png透過のjsは以下のサイト様から拝借しております。 http://wakuworks.jugem.jp/?eid=153 また、メガメニューは以下のサイト様から案を拝借しております。 http://www.skuare.net/2009/11/jquerycssvia_mega_drop_down_me.html png透過のjsを拝借したサイト様ではinput type="button"での フェードアウト/フェードインはできているようなので、それを応用しようとしました。 しかし私の少なすぎるjsの知識では改造することも難しく時間がかかってしまっています。 仕事の案件で使用しているため、時間があまりなく急いでいます。 メガメニューを取りやめることもできませんので、どうしても実装しなければなりません。 皆様のお力をお貸しいただければ、とても助かります。 どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- IE6のPNG透過
こんばんは どなたかわかりましたら押してください。 現在pngの透過をIE6で見れるよう試行錯誤してるのですが、 どうも上手くいきません。 只今こんな感じです。 以下CSS==================== #navi_layer { width: 100%; height: 50px; margin: 0px 0px 10px 0px; padding: 0px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='絶対パス指定.png',sizingMethod='crop'); background-image: url(絶対パス指定.png); background-repeat: repeat-x; } 以上CSS==================== このnavi_layerの背景を透過させて、 その上にイメージを載せようと思っています。 現段階では透過テストだけしているので、 イメージはまだ載せていません。 その状態で透けてくれない状態です。 使用している保存形態はPNG-24です。 IE7やFirefoxでは透過を確認できています。 なのでいけるかと思ったんですが… どなたか教えてください＞＜ 宜しくお願いします。
- ベストアンサー
- HTML
- PNGの透過について
こんにちは。PNGの透過をしたのですが、透過部分が灰色になってしまい上手く表示されません。 ちなみにブラウザはIE5.0です。 PNGの透過はどのブラウザに対応しているのですか？ 教えて下さい。
- ベストアンサー
- その他（インターネット・Webサービス）
- IE6で透過PNGを正常に表示したい。
はじめまして。 PNGを使用してドロップシャドウのついたボタンを挿入しようと考えています。 色々調べました、無反応だったり、ドロップシャドウ部分だけでなくボタンそのものが表示されなくなったりとうまくいきませんでした。 http://www.designwalker.com/2006/12/transparent-png.html http://wp.takuhitosotome.com/?s=pngfix http://www.stylish-style.com/csstec/hi-level/a-png.html ↑ 最後のやつはすべて表示されませんでした・・・あとの2つは無反応です。 head部分は以下のように記述しています。 <link href="style.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]--> </head> おそらく真ん中のを試した状態だと思います・・・ でファイルダウンロードしてアップロードしたんですが、ダメでした。。。 どうか解決方法を教えてください！
- 締切済み
- HTML
補足
ご回答ありがとうございます。 リンクの場所はググると上位に出てきたのでチェックしていましたが、 置きたいのがレンタルブログですから、jsファイルをサーバにアップロードってできないのではないのでしょうか。 ブログ訪問者解析をすると実に3割がIE6以下の利用者です。 無視はできません。 なんとかこの3割の方々にも、見ていただきたいのです。 gifは汚くて使えないです。。。