表行背景图象 [英] table row background image

问题描述

可能重复：

我试图有一个图像作为第一行的背景。问题是背景应用于每个单元，而不是作为一个整体。有办法吗？

http：/ /jsfiddle.net/bumpy009/c3txj/

结果应如下所示：

编辑：问题仅在Safari，Opera和Chrome中显示。

解决方案

如果你想跨越每一行，为什么不使它成为表背景，它在y轴？

  table {
 width：300px; 
 background-image：url（'mypic.jpg'）; 
 background-repeat：repeat-y; 
} 
  

BTW我用IE9，FF12测试你的代码 - 每行。但Chrome 15&

编辑

因为你只想在第一行，你应该使用background-position来确保图像保持在表的顶部（通常是第一行在哪里，对吗？：P）

  table {
 width：300px; 
 background-image：url（'mypic.png'）; 
 background-repeat：no-repeat; 
 background-position：center top; 
} 
  

Possible Duplicate:
Can we solve the table row background image problem, in chrome, in multi celled tables?

I'm trying to have one image as the background for the first row. The problem is that the background gets applied to each cell separately, not as a whole. Is there a way around it?

http://jsfiddle.net/bumpy009/c3txj/

Result should look something like this:

EDIT: The problem appears only in Safari, Opera and chrome. Didn't check IE yet.

解决方案

If you want it across each row, why not make it the table background instead and repeat it in the y-axis?

table {
    width: 300px;
    background-image: url('mypic.jpg');
    background-repeat: repeat-y;
}

BTW I tested your code with IE9, FF12 - those are showing the image once per row. But Chrome 15 & Safari 5 is repeating it for each td.

Edit

Since you only wanted it in the first-row, you should use background-position to make sure the image stays at the top of the table (that's usually where the first row is, right? :P)

table {
    width: 300px;
    background-image: url('mypic.png');
    background-repeat: no-repeat;
    background-position: center top;
}

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