我试图做一些我认为非常简单的事情。
我想在每个表行(或单元格的底部)显示背景图像,无论哪种效果最好,但我得到一些对齐问题。
图像似乎始终与单元格内容的底部对齐,但忽略任何填充。
border-origin:border-box
似乎对结果没有任何影响。
在行本身设置背景(即tr
标记)会产生问题。
后台使用以下语法:background:url('...') bottom left repeat-x;
请参阅结果的以下屏幕截图 - 我已添加了单元格的半透明轮廓以显示边界。红色虚线是背景。
这里有一个小提琴:http://jsfiddle.net/bendog/gvtqwhw0/
(注意:小提琴CDN到引导程序,我用于该项目)
有人会认为应该很容易......
问题出现在Mac上的最新Chrome和Firefox上(但尚未尝试其他浏览器)
答案 0 :(得分:1)
在必要时使用background-position
调整像素
tr {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIzMDBweCIgaGVpZ2h0PSIxMHB4Ij4NCgk8bGluZSB4MT0iMSIgeDI9IjMwMCIgeTE9IjEiIHkyPSIxIiBzdHJva2U9IiNlOTRjMWEiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxLCA1Ii8+DQo8L3N2Zz4NCg==) repeat-x;
background-position:0% 104%;
}
工作小提琴
答案 1 :(得分:0)
哦,好吧,我觉得有点蠢!
额外的填充是图像本身的空白部分。
使用经过校正的图像可以正常工作:http://jsfiddle.net/bendog/gvtqwhw0/24/
这是更新后的图片标签(显然我不能在没有复制某些代码的情况下发布指向jsfiddle的链接)
tr {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDAgMi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMDAgMi4yIiB4bWw6c3BhY2U9InByZXNlcnZlIj48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNFOTRDMUEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iMSw1IiB4MT0iMSIgeTE9IjEiIHgyPSIzMDAiIHkyPSIxIi8+PC9zdmc+) bottom left repeat-x;
}
当我在标题标签上使用相同的效果时,显而易见。