web-dev-qa-db-ja.com

マルチセルテーブルで、クロムのテーブル行の背景画像の問題を解決できますか？

よく聞かれますが、まだ良い答えは見ていません（そして見ました）。 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は基本的です-マルチセルテーブル。

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

cssbackground-imagehtml-tabletablerow
29
Ya'el

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

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

11
jackocnr

行にfloat：leftを追加すると、修正されるはずです。

tr {float:left;}
4
Aziz

Chrome 54のWindows10でテスト済み：

tr {
  background-attachment: fixed;
}

バグがないわけではないようですが、背景画像はロード時にビューポート全体で繰り返されるだけです。つまり、下にスクロールしたときに表示されるセルには背景がありません。

2
davidanton1d