AlphaImageLoaderを使用して文字を透過させる方法

このQ&Aのポイント
  • ホームページのボタンで、スクリプト系の細かい文字の背景を透明にする方法を解説します。
  • 文字の部分だけがIE6できれいに反映されない問題が発生しています。
  • AlphaImageLoaderを使用する方法やfireworksでの保存方法についても説明します。
回答を見る
  • ベストアンサー

AlphaImageLoaderを使用して文字を透過させたいのですが…

こんにちわ。 ホームページのボタンで、スクリプト系の細かい文字の背景を透明にしてfireworksで書き出し、backgroundとしてcssでAlphaImageLoaderを指定してアップ。 他の部分の透過に関してはこれでうまくいくのですが、この文字の部分だけがIE6できれいに反映されません。 よくある、透明部分がブルーグレーになると言う状態ではなく、文字背景は透過されて表示はできるのですが、ギザギザで線も細すぎて読み取れない状態です。 (gifよりはまともですが・・・。) 他の画像の透過はきれいに出ているのでcssの指定は正しいと思うのですが、どう調べても分からず、どなたかお知恵をお貸しください! fireworksでの保存方法ですが、png8,png24,png32と全て試してみましたがだめでした。 文字など細かいものに関しては諦めるしかないと言うことでしょうか? javascriptを使用できない条件であるためAlphaImageLoaderを使用しているのですが…。 ■css .png-filter{ background:url(images/index/btn_skip.png) no-repeat; width:110px; height:38px; } *html .png-filter { background: none; filter:progid:DXImageTransform.Microsoft. AlphaImageLoader(src='images/index/btn_skip.png', sizingMethod='scale'); width:110px; height:38px; } .png-filter a{ display:block; text-indent:-9999px; overflow:hidden; width:110px; height:38px; }

質問者が選んだベストアンサー

  • ベストアンサー
  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.3

あってないです…。 8bit形式は一色しか透過出来ないし、AlphaImageLoaderがなくても透過されます。 ただ、背景が灰色で塗りつぶされるのは、取り敢えず画像自体が適切に保存出来た証ですね。 ソースの書き方が間違っていなければ、IEの設定に原因ありだと思います。 インターネットオプションから何かの設定をいじれば有効になったはず…。 アクティブスクリプト云々の項目だっけ…。

mimita00
質問者

お礼

かなりお礼が遅くなり申し訳ありません。 あれから色々勉強して透過pngも操れるようになりました。 色々教えていただきありがとうございました。

その他の回答 (2)

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.2

いや、だからIE6の問題じゃなくて画像の問題…。 詳しく書かなかったのも悪いんだけど、8bit以下の形式ではアルファチャンネルが使用できないのです。 最初に背景を透明にして、アンチエイリアスを有効にした状態で文字を入力して24bit形式で保存すれば綺麗に透過出来ます。

mimita00
質問者

お礼

たびたびありがとうございます。 photoshopで背景を透明にしてpng-24で保存したのですが背景はグレーのままでした。 png-8でカラー256色で保存したところきれいに表示できました。 これであっているのでしょうか・・・?

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.1

多分画像の問題ではないでしょうか。 PNGであれば何でも綺麗に透過出来るというわけじゃないですよ。 ★輪郭がくっきりとしているものは確実にアウト ★画像を新規に作成するときに、背景を透明にしておかないとダメ ★背景を透明にせず、保存時に背景の透過処理を行っても限界がある

mimita00
質問者

お礼

ありがとうございます。 >PNGであれば何でも綺麗に透過出来るというわけじゃないですよ。 そうなんですね。 それがわかっただけでとてもすっきりしました。 IE6って厄介ですね。 スクリプトを使ってもだめなんでしょうか…。 とりあえず *htmlでIE6のみにgifを配置することにしました。 ご回答ありがとうございました。

関連するQ&A

  • 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
  • レイヤーを背景だけ透過させたい

    お世話になります。 レイヤーを背景だけ透過させたく、質問させていただきます。 レイヤーを透過させたい場合、よくスタイルシートのfilterが使われると思います。 たとえば <div style="width:100; height:20; color:#ff0000; background-color:#0000ff; filter:Alpha(opacity=60);"> フィルター適応</div> のようにすると、レイヤー全体が透過されます。 しかし、今回やりたいのは、背景のみが透過し、文字は透過させたくありません。 1つ考えた方法として、 <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; background-color:#0000ff; filter:Alpha(opacity=60);"> </div> <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; color:#ff0000;"> フィルター適応 </div> のように、無理やりレイヤーを2つ重ねて表示できないこともないのですが、もっとスマートな方法はないでしょうか。 ご存知の方がいらっしゃいましたら、ご教授お願いいたします。

    • ベストアンサー
    • HTML
  • iflameのテーブルは透過し画像は透過しない方法

    ホームページを作っています。 CSSを使用し、インラインフレームのページを作っております。 そこで困っているのがCSSの設定なのですが、 インラインフレーム部分とメニューコンテンツの部分の背景を 半透明に透過したい&画像は全て透過したくないのです。 そこで、まずはメニューコンテンツ部分の背景を透過するため CSSの方を下記のように設定しました。 .sitetitle{ font-size: 20px; font-weight:bold; color:#666633; letter-spacing:4px; padding:0px 0px 5px; background: #fff; filter:alpha(opacity=50); opacity:0.9; } それから、このsitetitle内に載せる画像をHTMLで設定しました。 <div class="sitetitle"> <img src="index_files/03.jpg" width="210" height="170" ></div> ですが、 画像まで透過されてしまいます(キャプチャ画像のように) 画像は透過したくないのですが、どのように cssの設定をし、HTMLタグを書けば良いのでしょうか? ブラウザはFireFoxですが、グーグルクロムでも動作確認を行います。

    • 締切済み
    • CSS
  • iframeの透過

    フレーム内の背景が透けて見えるようにpng画像を使用したのですがIEでは全く透過されません(firefoxではうまく透過されます) 出来ればIE6以上で透過できるようにしたいのですがどなたか分かる方みえないでしょうか? <td height="308" colspan="8" background="背景画像.jpg"><iframe src="フレーム画像.png" width="530" height="268" scrolling="yes" frameborder="0" style=" background-color:allowTrdansparency="true"></iframe></td>

  • テーブル背景のpng画像を透過したい

    テーブルの背景に透過部分を含んだpng画像を設定して、その上に文字を載せたいと考えています。簡略化した現在のタグは以下です。  <table>   <tr>   <td background="(png画像URL)">    ここに文字   </td>   </tr>  </table> 通常だとこれで良いのですが、このpng画像は透過部分を含んでいます。(ちなみにpng-24です) WindowsのIE7.0だと正常に透過されるのですが、IE6.0や他のブラウザですと透過部分が青白く浮かび上がってしまいます。 私はIE6.0でも透過されるように表示させたいのです。 欲を言うと、MacのSafariでも透過させたいです。 一方、テーブルの背景に設定していない、普通の画像ですと<img src="">タグを使っているのでCSSを利用して、 <スタイルシート指定部分> .ail { filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.firstChild.src + ", sizingMethod=scale)"); width: expression(this.firstChild.clientWidth+"px"); height: expression(this.firstChild.clientHeight+"px"); } .ail img { visibility: expression("hidden"); } </スタイルシート指定部分> <画像部分>  <span class="ail">  <img src="(png画像URL)">  </span> </画像部分> で透過しているのですが、テーブルの背景に指定した画像では、このタグは使えません。 他にも色々な方法を検索したのですが有効なものが見つからず、、、 そもそも、テーブルの背景に指定したpng画像は透過できないものなんでしょうか…?というところまで考えてしまいます。 もし方法があれば教えて欲しいですが、HTMLで実現不可能な範囲なのならばそれも指摘して欲しいです。 この部分だけクリアできれば、Webサイトも完成します。 切実に宜しくお願いします。

  • 透過してしまうのですが・・・

    現在タグでメニューバーをつくっているのですが、 背景が透過されるテーブルタグを利用したところあとから設置した画像までもが透過されてしまいました。その場合はどこのタグを直せばいいのでしょうか? ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>○○</title> <style type="text/css"> <!-- body { background-image: url(jfes_menupict.jpg); background-repeat: no-repeat; margin-left: 50px; margin-top: 20px; } --> </style></head> <body> <p>&nbsp;</p> <table style="filter:Alpha(opacity=50); background-color:#ffffff;"> <tr> <td width="281"><p align="center"> <img src="about.png" width="144" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="schedule.png" width="225" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="event.png" width="139" height="28" /></p> </td> </tr> <tr> <td><p align="center"><img src="blog.png" width="112" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="access.png" width="173" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="link.png" width="94" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="mail.png" width="96" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="toppage.png" width="200" height="27" /></p> </td> </tr> <tr> <td height="15">&nbsp;</td> </tr> </table> </body> </html>

  • filter内の画像を透過させない方法

    いつもお世話になっています。 filter内に位置する画像を透過させない方法を教えて下さい。 背景画像を上下左右に敷き詰めた場合、文字がが読みにくくなるのでfilterを使用しています。 しかしながらこの方法ではロゴや写真など透過させたくない画像までfilterがかかってしまいます。 自分でも試行錯誤を繰り返してみました。 filter効果を設定してあるdivを新しいdivで囲んで画像をpositionで指定してみたところ、IEではロゴが透過しませんでしたが、Firefoxではやはり透過されていました。 IEはcssなどの解釈がかなりいい加減と聞いていますので、Firefoxの表示を信用した方がいいように思われます。 Firefoxなど他のブラウザでも画像を透過させない方法はあるのでしょうか? ご存知の方、いらっしゃいましたら教えて下さい。 参考のため、ソースを下記に貼っておきます。 htmlやcssに関しては本やwebで検索しながら勉強中ですので、根本的な勘違い等あるかもしれません。 HTML部分 <body> <div id="page"> <h1><img src="image/logo.jpg" width="217" height="43" alt="My Web Site" /></h1> <div id="contents"> <div id="main"> <p>---本文---</p> </div><!-- main end --> </div><!-- contents end --> </div><!-- page end --> </body> css部分 div#page { width: 720px; margin-right: auto; margin-left: auto; padding: 0; position: relative; } div#page h1 { position: absolute; top: 50px; left: 251px; } div#contents { width: 720px; margin: 0 auto; padding: 0; text-align: left; background-color: #fff; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } div#main { width: 680px; margin: 0 auto; padding: 100px 20px 0 20px; }

    • ベストアンサー
    • HTML
  • 影付き(透過)ロゴタイトルの表示ないし背景との同調について

    影付き(透過)ロゴタイトルの表示ないし背景との同調について 只今HPを作成しているのですが、今回背景にボーダーを使い、その上にタイトルロゴを表示させようと思っています。デザイン的にそのロゴに影を付け、初めは.gifで透過保存させようと思ったのですが、荒々しい風に出来てしまいました。pngでは美しく出来たのですが、pngはネットブラウザ環境によっては表示されないと聞いたのであまり使いたくなくて・・・。 そこで今度はそのロゴにあらかじめボーダー画像を加えて、cssで上手に背景と溶け込ませて表示させようと思ったのですが、上手に表示出来ません。 ちなみにそのタイトルを表示させる部分は #wrapper{ margin:0px; padding: 0px; text-align: center; } #contents{ width: 880px; margin-left:auto; margin-right:auto; } で内包してあります。html上で簡単に書くと ・ ・ ・ <body> <div id="wrapper"> <div id="contents"> ここに画像タグ </div> </div> </body> といった感じです。 背景は横一列で固定するようにしています。 body{ font-size: 13px; line-height:160%; background-image: url(img/back.gif); background-repeat:repeat-x; background-position: 0% 0%; } こんな感じです。 CSSでこの問題を解決するか、それともgifで上手に透過画像を作るのか、はたまたpng保存で良いのか、分かりやすく解説して下さる方、宜しくお願いします。分かりにくーーい質問で申し訳ありません・・・。

    • ベストアンサー
    • CSS
  • 背景を透過するタグについて

    こんばんわ。タイトル通り【背景を透過するタグについて】質問があります。よろしくお願いいたします。 <style type="text/css"> <!-- .box1{/*テキストスペース*/ … … width : 157px; background-color : #ffffff; filter : chroma(color=#ffffff); } </style> と、スタイルシートで色々と指定しております。 このテキストスペースの背後に画像があるので、背景を透かせたく、【chroma】を使って指定した色(白)を透かせましたが、 これだとまったく透明になってしまうので…できれば <table style="filter:Alpha(opacity=20)"> のように、透過の度合いを指定できるようになりませんでしょうか? ↑テーブルでの透過の仕方しか分からず、上のテキストスペースで同じようなことをしたいのですが…。可能でしょうか? お手数ですが、宜しければ教えていただけるととても助かります。 お願いいたします。

    • ベストアンサー
    • HTML
  • CSSのfilterでテキストまで透明化される

    CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色(白)が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色(白)だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック:windows IE 8 です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【CSS】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色(白)が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている(親divのfilterがpタグまで継承されているから?)ので pタグにfilterプロパティで不透明を100に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【CSS】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色(白)が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明100に設定 } ******************************************************* ご指導のほどよろしくお願いします。

    • ベストアンサー
    • CSS

専門家に質問してみよう