CSS/Webkit：表格行的背景图片

由于某些原因，当您将背景图片应用于Safari/Chrome中的tr时，会将其呈现为好像该规则适用于每个td。CSS/Webkit：表格行的背景图片

火狐：

Firefox http://www.whyprime.com/temp/table-firefox.png

Safari浏览器：

Safari http://www.whyprime.com/temp/table-safari.png

我发现这篇文章讨论的修复程序：

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

我能够使用spacer gif在IE中工作，但无法解决Safari的问题。

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

来源

2009-12-24 Jason Keene

而你的代码会在哪里？ – 2009-12-24 15:37:06

将你的表总是只有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; 
}

你也可以使用精灵形象，你使用1张图片并将其放置在两个背景上。

我意识到这可能不是最理想的解决方案，但它至少可以解决您的问题并使您的项目得以移动。我有时候会使用这样简单的解决方案来取得进展，然后重新研究这个问题，以便稍后提高效率。

希望这会有所帮助！

来源

2009-12-24 14:10:56

啊，我想这将是传统上为表格创建背景图片的方式。这是很长的，因为我不得不认真塑造一张带有切片背景的桌子，以及我从未想到过的所有事物。我可以通过定位带有x/y值的背景来缓解Webkit浏览器中的显示问题，但将来这将成为我将采用的路线，并且只是使用JavaScript动态地应用适当的背景样式以保持标记清洁和简单。我会标记为好的建议和功能解决方案的答案。多谢兄弟！ – 2009-12-26 19:16:18

默认情况下，TR和TD具有显示属性table-cell和table-row。我们需要他们忘记它，感觉像简单的块元素：

tr {display: block;} 
td {display: inline-block; background: transparent;}

此代码解决了我为我呈现的问题。

来源

2010-11-02 13:11:25

感谢完美的解决方案，增加了webkit @media CSS hack。 '@media screen and（-webkit-min-device-pixel-ratio：0）{ tr {display：block;} \t td {display：inline-block; width：195px}' – Jamie 2011-03-15 15:20:37

你是上帝！！不是，但你的解决方案帮助了我。谢谢。 – Steve 2011-12-21 17:21:21

感谢你的解决方案在我们的CSS上，它节省了我很多时间。 – 2012-05-01 14:10:02

这有点晚了，但是，你可以使用“background-attachment：fixed”来解决这个问题。

<table> 
    <tr class="bg"> 
    <td></td> 
    <td></td> 
    </tr> 
</table>

和CSS

tr.bg { 
    background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px; 
    background-attachment: fixed; 
}

和它的作品！

来源

2012-07-05 08:18:57 YellowMart

曾用此滚动？这很有趣 – HerrSerker 2014-07-08 14:55:37

感谢您的想法。我花了1周寻找好的解决方案渐变背景tr表。谢谢。 – Peter 2014-07-30 19:23:51

这节省了我的生命。我爱你。 – thouliha 2015-08-14 14:18:15

CSS/Webkit：表格行的背景图片

回答

相关问题