セルを半透明化できるのでしょうか？

質問

私は今WindowsXPで、ホームページビルダー9を使ってHPを作成しています。
作っていて思ったのですが、セルに色を付けて、その色を半透明化して、背景を見せる方法はあるのでしょうか？

今背景は柄のある壁紙に設定してあり、スクロールを固定してます。
100%幅の表を作り、色を付けているのですが、それを半透明化して背景の壁紙が見えるようにできたら良いなと思っていろいろ調べたのですが、調べきれませんでした。
セルには単純に色を付けているだけですので、それ自体を半透明化するのでなく、他に同じような効果があればそれでも結構ですので、もしご存知の方がいらしたら教えていただきたいと思い質問させていただきました。

わかりづらい説明で申し訳ありません。よろしくお願いいたします。

回答No.1

noname#83116 · ベストアンサー

↓こちらの方法を応用すれば、表にも適用できるはずです。
http://www.aimix.jp/stylealpha.html

ただし、このページにも書いてありますが、Internet Explorer のみの機能ですので、その他のブラウザでは正しく表示されません。

お礼

お返事遅くなり申し訳ありません。
回答ありがとうございました。
参考にやってみたいと思います。

回答No.6

foliage

フィルターを使う方法に関してです。
何が何のブラウザ用だったか忘れてしまったのですが、
下のような感じで少し付け加えるとNetscapeやFirefoxでも
半透明の効果が出るようになったと思います。

style="filter: Alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;">

お礼

お返事遅くなり申し訳ありません。
回答ありがとうございました。
参考にやってみたいと思います。

回答No.5

natatin

これで　出来ないことはありませんが　IEしか対応しません

セルに背景で入れたのでは　完全に透過しますので　画像ファイルを作っていれるとうまく出来ます！

http://www.wsb.jp/hpb/css/filter.htm#01

お礼

お返事遅くなり申し訳ありません。
回答ありがとうございました。
参考にやってみたいと思います。

回答No.4

noname#22328

CSSで操作するとブラウザが限定されてしまうので、素材作りで別の方法を。
透過させたい図形が単色だと上手く行きます。
Photoshopで編集画面を最大に拡大して、ドット絵が描ける状態にします。
作りたい色を鉛筆ツール１pxで、１pxごとの間隔を開けながら塗りつぶして行きます。
（描画色と空白で市松模様を作る）
10×10pxでいいでしょう。
WEB用に保存で、透過GIFを作れば、背景が透けて見えます。

単純ですが効果的。
結構こうゆう素材を作ってるサイト多いです。
慣れて来たら、市松模様を2pxで作ってみるとか、ストライプにしてみるとか、
色々試してみて下さい。

お礼

お返事遅くなり申し訳ありません。
回答ありがとうございました。
確かに単純な構造ですが、効果的のようですね…。
参考にやってみたいと思います。

回答No.3

s_hukami

すみません。先の回答に修正・追記です。
以下の方法では半透明のGIFは作成できません。
半透明のPNGならば作成できます。
ただし、PNGは古いブラウザでは透過表示できません。
ですからGIFで半透明的な画像をを作成するには、1pxごとに点を打つなどして作成しなくてはなりません。

回答No.2

s_hukami

半透明の画像ファイルを作成し、CSSで指定すれば良いのではと思われます。

まずお持ちの画像ソフトがPhotoshopの場合でしたら、背景透明で2px×2pxの新規ファイルを作成し、全てを選択し、色を付けたいセルに指定したい色を選択し、塗りつぶしで描画色で不透明モード30～50%（お好みで指定してください）で塗った後、Web用に保存で透過GIFを作成します。
そして、その半透明GIF画像をCSSでセルの背景色に指定します。

ソースは以下のような感じです。
---------------------------------------
CSS
---------------------------------------
.deco td{ background-image: url(images/gazo.gif); }
---------------------------------------
HTML
---------------------------------------
<table class="deco">
<tr><td>sample</td><td>sample</td></tr>
<tr><td>sample</td><td>sample</td></tr>
</table>
---------------------------------------
これはセル全体に色を付ける場合ですが、特定のセルにだけつけたい場合は、CSSを
---------------------------------------
.deco{ background-image: url(images/gazo.gif); }
---------------------------------------
とし、
---------------------------------------
<table>
<tr><td class="deco">sample</td><td>sample</td></tr>
<tr><td>sample</td><td>sample</td></tr>
</table>
---------------------------------------
などとして下さい。

お礼

お返事遅くなり申し訳ありません。
丁寧な解説ありがとうございました。
難しそうですが、頑張って参考にやってみたいと思います。