こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

テーブル背景の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サイトも完成します。
切実に宜しくお願いします。

投稿日時 - 2008-03-14 20:33:01

QNo.3862975

困ってます

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

「透過 png IE Safari」とかでちょっと検索すれば参考になるコンテンツはいくらでも出てきますよ。

http://www25.tok2.com/home/kumaboard/memo/?entry=071207
http://www.designwalker.com/2006/12/transparent-png2.html

上記は、他の方法論や透過画像を使う必要性についてまで含めて色々と参考になりそうです。
下記はJavaScriptとCSSのexpressionの合わせ技ですね。
このあたりの方法論を組み込めば実現可能かと。

検証はしていませんので悪しからず。

投稿日時 - 2008-03-14 21:36:59

あなたにオススメの質問