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

Posted 2023-03-06

【中文标题】CSS/WebKit：表格行的背景图片

【英文标题】：CSS/WebKit: Background Images for Table Row

【发布时间】：2010-12-29 19:47:54

【问题描述】：

由于某种原因，当您在 Safari 和 Chrome 中将背景图像应用到 tr 时，它会将其呈现为好像规则适用于每个 td。

火狐：

_{（来源：whyprime.com）}

Safari：

_{（来源：whyprime.com）}

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

Applying a background image to a table row

我能够在 Internet Explorer 中使用分隔符 GIF 图像让它工作，但我无法在 Safari 中使用它。

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

【问题讨论】：

你的代码会在哪里？

【参考方案1】：

你可以使用“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;

而且它有效！

【讨论】：

曾经滚动过这个？有点意思

感谢您的想法。我花了 1 周的时间寻找好的解决方案渐变背景 tr 表。谢谢。

这救了我的命。我爱你。

这应该被标记为答案，因为它不依赖于解决方法

这会将图像固定到页面的背景，而不是表格行。所以会为例如工作。没有特定开始或结束但没有任何需要与表格本身对齐的背景的重复模式

【参考方案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;

您也可以使用精灵图像，其中使用一个图像并为两个背景设置不同的位置。

我意识到这可能不是最理想的解决方案，但它至少可以解决您的问题并让您的项目顺利进行。我有时会使用诸如此类的简单解决方案来取得进展，然后再重新审视问题以提高效率。

【讨论】：

啊，我想这将是您传统上为表格制作背景图像的方式。我已经很久没有认真地设计一张带有切片背景的桌子了，我什至没有想到这一点。我能够通过使用 x/y 值定位背景来缓解 Webkit 浏览器中的显示问题，但将来这将是我将采用的路线，只需使用 javascript 动态应用适当的背景样式以保持标记干净和简单.对于好的建议和功能解决方案，我将标记为已回答。谢谢兄弟！

【参考方案3】：

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

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

这段代码为我解决了渲染问题。

【讨论】：

感谢为我添加了 webkit @media CSS hack 的完美修复。 '@media screen and (-webkit-min-device-pixel-ratio:0) tr display: block; td display: inline-block;width:195px '

感谢您在我们的 css 中提供的解决方案，它节省了我很多时间。