29

よく聞かれますが、まだ良い答えを見つけていません (そして調べました)。CSS で背景画像を表の行に設定すると、画像はすべてのセルで繰り返されます。position: relative（行に対して）を設定し、（background-image: noneセルに対して）を設定すると、IEの問題は解決しますが、クロムの問題は解決しません。多くの呼び出しがあり、サイズが異なるため、バックグラウンド ポジショニングを使用できません。(そして、写真は左右対称ではありません。片側からのフェードアウトです。誰かいますか??

CSS コードの例: 

tr { height: 30px; position:relative;}
tr.green { background: url('green_30.png') no-repeat left top; }
tr.orange { background: url('oranger_30.png') no-repeat left top;}
tr.red { background: url('red_30.png') no-repeat left top; }
td { background-image: none; }

HTML は基本的なもので、マルチセル テーブルです。

目標は、すべての行に異なる色をフェードさせることですが、パターン以外の画像にすることもできます。

4

3 に答える 3

11

わかりました。私はこれについて何年も読んでいて、すべてのブラウザの簡単な修正を見つけることができませんでしたが、固定の高さの行を使用しているので、独自の回避策を開発しました：http: //jsfiddle.net/DR8bM/

基本的に、背景画像を行に配置する代わりに、各行の最初のセルの絶対位置のdivに配置します（そして、行全体を埋めるように展開します）。これは少しハッキーですが、あなたが望むものを達成するための唯一の信頼できる方法かもしれません。

于 2010-06-16T11:06:31.683 に答える
4

float:left を行に追加すると、修正されます。

tr {float:left;}
于 2011-08-04T01:00:58.337 に答える