如何使用填充在表格单元格中定位背景图像

Question

在应用程序中，我有一些列可以包含内联可编辑的值。对于这些单元格，我想显示一个铅笔图标：

td.editable
{
    padding-right: 20px;
    background-image: url(pencil.png);
    background-repeat: no-repeat;
    background-position: center right;
}

这个CSS几乎没有...除了...我希望在单元格边框和图像之间有2px的空间。有可能用背景图像和CSS来实现吗？如果没有，我该如何实现呢？

由于

Answer 1

只需使用2px透明边框重新保存您的BG图像，并使输入高4px以适应新的高度。

Answer 2

将background-position属性与x％y％。

一起使用

http://www.w3schools.com/cssref/pr_background-position.asp

Answer 3

试试这个：

table { border-spacing: 2px;}

Answer 4

最简单的方法？在pencil.png的右侧添加2个像素。你可以用背景位置来搞定，但不值得努力。