画像でセルを塗りつぶすには

こんにちは私は3px * 10pxのグラデーション画像を使って、この画像で完全なセルを塗りつぶしています。また、セルの内容が自動的に伸びたかったので画像がグラデーションであるので、私はそれを繰り返す必要はありませんが、醜く見えます。誰かが助けてくれますか？画像でセルを塗りつぶすには

コードスニペットは次のとおりです。

<html> 
<head></head> 
<body> 
<table border=1> 
<tr><td>a<td rowspan="9" style="background-image:url('images/bg_menu_hov.gif');background-repeat:no-repeat; height:100%;">&nbsp<td>b</tr> 
<tr><td>c<td>d</tr> 
<tr><td>e<td>f</tr> 
<tr><td>c<td>d</tr> 
<tr><td>e<td>f</tr> 
<tr><td>c<td>d</tr> 
<tr><td>e<td>f</tr> 
<tr><td>c<td>d</tr> 
<tr><td>e<td>f</tr> 
</table> 
<body> 
</html>

出典

2011-02-09 Vinay

セルとは、テーブルやdivのセルを意味しますか？（または何か他のもの） – Sotiris

私はテーブルの細胞を意味します.. – Vinay

あなたが何をするにしても、小さく見える勾配画像を伸ばします。あなたが顕微鏡画像で始まっているので、非常に素早くブロック化/ピクセル化されます。 –

画像によっては、background-repeatを別に設定する必要があります。

画像を伸ばすのは良い考えではありません。一般的には、グラデーションをデザインに合わせて幅広くするか、または十分に高くする必要があります。グラデーションを背景色と同じ色にフェードアウトさせることをお勧めします。

イメージサイズ（3px * 10px）から判断すると、background-repeatを 'repeat-x'に設定する必要があります。

出典

2011-02-09 16:40:46

それは画像をタイル化するだけです。伸びません – Vinay

私が言ったように、それは[推奨されない、ハッキー] /webdesign.about.com/od/css3/f/blfaqbgsize.htm）、通常の回避策は（あなたのシナリオでは）十分に高い画像を提供することです。 CSS3はこれをサポートしているようだ（http://requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/）。 –

またはブラウザ固有の解決策：http://www.css3.info/preview/background-size/ –

コードが示唆するように、3px幅の画像を使用していますが、タイル貼りの場合は実際には醜いように見えますが、はるかによく伸びるように見えません。

グラデーションが完全に垂直の場合、元の画像を1ピクセル幅に縮小することを検討してください。そうすれば、水平に繰り返すことによる騒音はありません。

出典

2011-02-09 16:41:16 daveyfaherty

Ohn、no-repeatをrepeat-xに変更します – daveyfaherty

画像を引き伸ばさないように画像を伸ばします – Vinay

1ピクセル幅広い画像、ストレッチ、タイリングが同じ視覚効果を実現します。タイリングは実装が簡単です。 – daveyfaherty

画像でセルを塗りつぶすには

答えて

関連する問題