Opera等でもグラデーションを利用できるよに

質問

お世話になります。
テーブルの背景にグラデーションを利用したいのです。
IEであればスタイルシートで
filter: progid:DXImageTransform.Microsoft.gradient
(startcolorstr=#FFFFD9, endcolorstr=#FFFF99, gradienttype=0);
のように記述すればよいと思うのですが、Opera等ではそれができません。
なので、テーブルの背景にグラデーション画像を用意しようと思ったのですが、
グラデーションは縦に色が変わっていきたいのです。
横に変わっていくのであれば、横幅は固定なので
その画像が繰り返し表示されれば問題ないと思うのですが。
縦のグラデーションでかつテーブルの高さは可変です。
画像よりテーブルが大きくなってしまった場合には、繰り返されてしまいます。
テーブル枠にあわせて、背景の画像の大きさも替えることはできないでしょうか？

よろしくお願いいたします。

回答No.3

d-_-b_kenken · ベストアンサー

「枠付きのグラデーション」というのは、テーブルの左右の枠線のことですか？（グラデーション画像の左右が枠線になっているということですか？）

幅が固定なら、テーブルと同じ横幅サイズのグラデージョン画像を３分割して、セルの背景として、上部・中央（可変部分用）・下部のように指定する方法はどうですか？

お礼

ありがとうございます。
アドバイス通りですやりました。
可変部のグラデーション画像はある程度の大きさで作成しておいて、それより大きい場合には、上のほうだけグラデーションになるようにしました。

回答No.2

d-_-b_kenken

＃１訂正です。

誤：
backgroundプロパティで背景画像を「no-repeat」に指定して繰り返さないようにしておく。

正：
「repeat-x」に指定して横方向だけに繰り返すように指定しておく。

でした。

補足

ありがとうございます。
説明をしていなかったのですが、
グラデーションだけでなく。枠付きのグラデーションなんです。
角が丸い四角の枠なので、
一緒に画像で作ってしまえば楽かなと考えたのですが。
通常IEの場合はスタイルシートで角が丸い枠線を
引くことができないので。（FireFoxは可能でしたが）
可変テーブルサイズで
枠の角が丸くて、中はグラデーション
というの不可能でしょうか？

回答No.1

d-_-b_kenken

最も簡単な方法として、単純に、可変で変化するテーブルの高さを計算に入れた上で縦に大きめの画像を背景に指定して、backgroundプロパティで背景画像を「no-repeat」に指定して繰り返さないようにしておく。
さらに、背景画像よりテーブルが長くなってしまった場合に備えて、backgroundプロパティで背景色をグラデーション最下部と同じ色に指定しておけばいいのではないでしょうか？