如何在CSS中使背景图片与表格单元格底部对齐？

Question

我试图做一些我认为非常简单的事情。

我想在每个表格行（或单元格，哪个更好用）底部显示一个背景图像，但我遇到了一些对齐问题。

图像总是似乎与单元格内容底部对齐，但忽略了任何填充。

"border-origin:border-box" 对结果似乎也没有任何影响。

在行本身上设置背景（即 "tr" 标签）会产生问题。

背景使用此语法: "background:url('...') bottom left repeat-x;"。

请参见以下结果的屏幕截图 - 我添加了半透明的单元格轮廓线，只是为了显示边界。红色虚线是背景。

这里有一个相关示例：http://jsfiddle.net/bendog/gvtqwhw0/

需要注意的是，示例使用了 Bootstrap 的 CDNs。

本应该很简单的问题，但是在我的最新版 Chrome 和 Firefox 浏览器上出现了问题（尚未尝试其他浏览器）。

- Ben

Answer 1

使用background-position根据需要调整像素。

tr {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIzMDBweCIgaGVpZ2h0PSIxMHB4Ij4NCgk8bGluZSB4MT0iMSIgeDI9IjMwMCIgeTE9IjEiIHkyPSIxIiBzdHJva2U9IiNlOTRjMWEiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxLCA1Ii8+DQo8L3N2Zz4NCg==) repeat-x;
    background-position:0% 104%;
}

工作中的小例子

http://jsfiddle.net/gvtqwhw0/23/

- Manjunath Siddappa

---

我已经更新了答案，它可以在IE、Firefox和Chrome中运行。是的，它使用硬编码位置像素。 - Manjunath Siddappa

硬编码像素并不实用，如果一行分成两行怎么办？ - Ben

现在检查一下，我已经以百分比给出了值。它适用于任意数量的行。在Windows中测试过IE、Firefox和Chrome浏览器。 - Manjunath Siddappa

感谢您再次尝试。在我的OSX Chrome上无法正常工作 - 背景图像根本没有显示。它开始在102％的偏移处出现，但仍然略微偏离中心。 - Ben

抱歉，我没有OSX。 - Manjunath Siddappa

不幸的是，这只是显示了这个提议的修复更像是对问题的一个变通方法，而不是解决方案。还是感谢你的尝试。 - Ben

Answer 2

哦，我感觉有点傻！

额外的填充是图像本身的空白部分。

使用更正的图像可以正常工作：http://jsfiddle.net/bendog/gvtqwhw0/24/

这是更新后的图像标签（显然我不能在这里发布 jsfiddle 的链接而不复制一些代码）

tr {
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDAgMi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMDAgMi4yIiB4bWw6c3BhY2U9InByZXNlcnZlIj48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNFOTRDMUEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iMSw1IiB4MT0iMSIgeTE9IjEiIHgyPSIzMDAiIHkyPSIxIi8+PC9zdmc+) bottom left repeat-x;
    }

当我在标题标签上使用相同的效果时，这一点变得明显了。

- Ben