CSS / Webkit：表行的背景图像 [英] CSS/Webkit: Background Images for Table Row

问题描述

Firefox：

由于某些原因，当您将背景图片应用于Safari / Chrome中的tr时，它会按照规则应用于每个td。

Safari：

我发现这篇文章讨论了一个修复：

http://snook.ca/archives/html_and_css/applying_a_back

我能够在IE中使用spacer gifs工作，但无法找到Safari。

http://www.whyprime.com/temp/table-background.html

解决方案

你的表总是只有2行吗？如：

 < table> 
< tr> 
< td>< / td> 
< td>< / td> 
< / tr> 
< / table> 
  

如果是这样，一个简单但不过分优雅的解决方案是将背景图像分成两个图像，并将CSS类应用于左右列，将一半箭头应用于左列的右侧，并应用于右列的左侧：

 < table> 
< tr> 
< td class =left>< / td> 
< td class =right>< / td> 
< / tr> 
< / table> 
  

您的CSS可能类似于：

  td.left 
 {
 background：#ffffff url（../ PathToLeftBackground.png）top right; 
} 
 td.right 
 {
 background：#fffff url（../ PathToRightBackground.png）top left; 
} 
  

您还可以使用sprite图像，其中使用1个图像，对于两个背景。

我意识到这可能不是最理想的解决方案，但它至少可以解决你的问题，让你的项目移动。我有时使用简单的解决方案，例如这是为了前进的进度，然后重新访问的问题，使其更高效的后来。

希望这有助于！

For some reason when you apply a background image to a tr in Safari/Chrome it renders it as if the rule applies to every td.

Firefox:

Safari:

I found this article discussing a fix:

http://snook.ca/archives/html_and_css/applying_a_back

I was able to get it working in IE with spacer gifs but can't figure it out for Safari.

http://www.whyprime.com/temp/table-background.html

解决方案

Will your table always only have 2 rows? Such as:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

If so, a simple but not overly elegant solution would be to split your background image into two images, and apply a CSS class to the left and right column, applying half of the arrow to the right side of the left column, and to the left side of the right column:

<table>
  <tr>
    <td class="left"></td>
    <td class="right"></td>
  </tr>
</table>

Your CSS could then be similar to:

td.left
{
  background: #ffffff url(../PathToLeftBackground.png) top right;
}
td.right
{
  background: #fffff url(../PathToRightBackground.png) top left;
}

You could also use a sprite image where you use 1 image and position it differently for the two backgrounds.

I realize it's probably not the most ideal solution but it would at least fix your issue and get your project moving. I sometimes use simple solutions such as this in order to make forward progress, and then revisit the problem to make it more efficient later.

Hope this helps!

这篇关于CSS / Webkit：表行的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！