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

时间:2014-11-05 04:59:23

标签: html css

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

我想在每个表行(或单元格的底部)显示背景图像,无论哪种效果最好,但我得到一些对齐问题。

图像似乎始终与单元格内容的底部对齐,但忽略任何填充。

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

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

后台使用以下语法:background:url('...') bottom left repeat-x;

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

Screenshot

这里有一个小提琴:http://jsfiddle.net/bendog/gvtqwhw0/

(注意:小提琴CDN到引导程序,我用于该项目)

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

问题出现在Mac上的最新Chrome和Firefox上(但尚未尝试其他浏览器)

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

哦,好吧,我觉得有点蠢!

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

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

这是更新后的图片标签(显然我不能在没有复制某些代码的情况下发布指向jsfiddle的链接)

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

当我在标题标签上使用相同的效果时,显而易见。