html - 如何将背景图像对齐到 css 中表格单元格的底部？

Question

我正在尝试做一些我认为非常简单的事情..

我想在每个表格行(或单元格，以效果最佳者为准)的底部显示背景图片，但我遇到了一些对齐问题。

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

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

在行本身上设置背景(即 tr 标记)会产生问题。

背景使用这种语法:background:url('...') bottom left repeat-x;

请看下面的结果截图——我添加了一个半透明的单元格轮廓来显示边界。红色虚线是背景。

这是一个 fiddle :http://jsfiddle.net/bendog/gvtqwhw0/

(注意: Bootstrap 的 fiddle CDN，我正在用于该元素)

有人会认为这应该很容易...

问题出现在我最新的 Mac 上的 Chrome 和 Firefox 上(但还没有尝试过其他浏览器)

Answer 1

必要时使用background-position调整像素

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

工作 fiddle

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