我們可以通過chrome在多單元格表格中解決表格行背景圖像問題嗎？

它經常被問到 - 但我還沒有看到一個很好的答案（我看了）。如果您將CSS中的背景圖像設置爲表格行，則圖像會在每個單元格中重複出現。如果你設置position: relative（對於行）並設置background-image: none（對於單元格），它可以解決IE上的問題，但不能在Chrome上解決問題！我無法使用背景定位，因爲有很多呼叫，它們的大小各不相同。（和圖片不symmetrical-這是一個褪色從一側出任何人??我們可以通過chrome在多單元格表格中解決表格行背景圖像問題嗎？

示例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是基本 - 一種多細胞表

我的目標是讓不同的顏色淡入每一行，但它可能是任何非模式圖像。

來源

2010-06-08 Ya' el

你有一個活的例子或一些源標記/ css？ – Kyle 2010-06-08 13:06:28

似乎Firefox是唯一一款表現得應該如此的瀏覽器。 Chrome，IE，Opera和Safari都會導致背景圖像在每個單元格中重新啓動，而不是整個行都很好地不間斷地流動。此問題在http://code.google.com/p/chromium/issues/detail?id=44361上列出，但看起來不會被修復。 – 2010-06-09 05:22:29

在Ubuntu 9.10上，使用Google Chrome 5.0.375.55對我來說工作得很好。 http://jsfiddle.net/pzjUt/和我看到的：http://img153.imageshack.us/img153/3521/resultm.png – jackocnr 2010-06-09 17:39:08

好吧，我花了很多時間閱讀這個，並找不到所有瀏覽器的簡單修復，但作爲我看到你正在使用固定高度的行，我已經開發了我自己的解決方法：http://jsfiddle.net/DR8bM/

基本上，不是將背景圖像放在行上，而是將其放在每行的第一個單元格中的絕對位置div（並將其展開以填充整行）。這有點冒險，但可能是實現你想要的唯一可靠的方法。

來源

2010-06-16 11:06:31 jackocnr

這真的幫助了我！非常感謝！！ – Soph 2012-01-18 18:51:04

添加浮動：留在行中，應該修復它。

tr {float:left;}

來源

2011-08-04 01:00:58 Aziz

爲我工作。解決了鉻和Safari瀏覽器中的問題;沒有引起任何問題，我可以看到，在Firefox和Internet Explorer（原始問題不存在） – that0th3rGuy 2012-05-10 12:21:18

應用此修復程序時，我失去了所有列寬。只有你有你預先設定的寬度時纔會有效！ – blo0p3r 2013-06-28 16:05:15

@ blo0p3r你說得對。但它是一種flex風格：[看我的codepen]（http://codepen.io/HerrSerker/pen/JEvHA） – HerrSerker 2014-07-08 14:42:53

測試在Chrome 54在Windows 10：

tr { 
    background-attachment: fixed; 
}

雖然現在看來，這不是沒有缺陷 - 背景圖像只重複整個視在加載時，這意味着細胞時出現向下滾動不具備背景。

來源

2016-11-02 12:03:48 davidanton1d

底部的評論最終幫助了我，謝謝！ – Ecko 2018-02-28 21:58:55

我們可以通過chrome在多單元格表格中解決表格行背景圖像問題嗎？

回答

相關問題