小开

首先，要有点怕老婆，最好不要使用只是的 <background>标签。相反，应该使用适当的、更具体的 <background-image>标记。

唯一的方法，我知道做这样的事情是建立填充进入的形象扩展磨砂。因为空像素没有被剥离，所以这里就有了填充。所以如果你需要一个10px 的边框，在你的图片周围创建一个10px 的空像素。这是在 Photoshop，烟花，GIMP，等多简单。

我还建议尝试 PNG8格式，而不是垂死的 GIF... 很多更好。

如果我们知道更多关于你如何使用它的信息，可能会有其他的解决方案。:)看起来好像你要加一个手风琴按钮。这最好放在 HTML 中，因为这样您就可以使用 JavaScript/PHP 来定位它; 如果它在后台(至少不是简单的) ，那么您就不能这样做。在这种情况下，您可以使用以下方法来设计您目前在 CSS 中使用的图像的样式:

#hello img { padding: 10px; }

WR！

小开

最佳答案

更新答案:

有人多次评论说这不是这个问题的正确答案，我同意。回到写这个答案的时候，IE9还是新的(大约8个月前) ，包括我在内的许多开发人员都需要一个针对 < = IE9的解决方案。IE 9就是 IE 开始支持 background-origin。然而，它已经超过六年半，所以这里的更新解决方案，我强烈推荐使用一个实际的边界。在需要 < IE9支持的情况下。我的原始答案可以在演示片段下面找到。它使用一个不透明的边框来模拟背景图像的填充。

#hello {
padding-right: 10px;
background-color:green;
background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
background-origin: content-box;
}

<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>

Original Answer:

you can fake it with a 10px border of the same color as the background:

http://jsbin.com/eparad/edit#javascript,html,live

#hello {
border: 10px solid #e8e8e8;
background-color: green;
background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
no-repeat scroll right center #e8e8e8;
}

小开

这其实很简单。你就快成功了，就像你对 background-position: right center;做的那样。在这种情况下，实际上需要的就是类似的东西。我们把这些转换成百分比。我们知道 center = 50%，所以这很简单。现在，为了得到你想要的填充，你需要像这样定位背景: background-position: 99% 50%。

第二个，也是更有效的方法，是使用相同的 background-position思想，只使用 background-position: 400px (width of parent) 50%;。当然，这个方法需要一个静态宽度，但是每次都会给你同样的东西。

方法1(99% 50%)
方法2(400px50%)

小开

您可以使用 back-source: pding-box; 然后在需要的地方添加一些填充，例如: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;} 通过这种方式，您可以将图像附加到包含它的 div 填充框，以便可以将它放置在任何您想要的位置。

小开

为了在背景图像之前添加空间，可以定义使用“背景-图像”对象的元素的“宽度”。然后在“背景位置”属性中定义像素值，从左侧创建空间。

例如，我有一个场景，我得到了一个导航菜单，其中有一个子弹前的链接项目和子弹图形是可变的，如果腐蚀链接变成一个活动状态。此外，活动链接还有一个背景颜色要显示，这个背景颜色在链接项的左右两侧都有大约15px 的填充(所以在左侧，它还包括链接的项目符号图标)。

而填充-权利实现的目的，有背景颜色拉伸到15像素以上的链接文本的权利。填充-left 只增加了链接文本和项目符号之间的空格。

所以我从 PSD 设计中提取了背景色对象的宽度。然后将它添加到 li 元素(在一个显示活动状态的类中) ，然后将背景位置值设置为20px。导致子弹图标从左边移到了里面。它提供了我想要的输出左填充之前的子弹图标用作背景图像。

请注意，您可能需要相应地调整您的空白/边距值，这可能用于链接项之间的间距或项目符号图标和链接文本之间的间距。

小开

实际上有一个本地解决方案，使用四值到后台定位

.CssClass {background-position: right 10px top 20px;}

这意味着右边10px，上边20px。也可以使用 三个值，第四个值将被计为0。

小开

如果其他人需要为 背景图像背景图像和 Background-size: contain或掩护的内容添加填充，我使用了以下方法，这是一种很好的方法。您可以用 10% 或 2VW或任何您喜欢的方式替换边框宽度。

.bg-image {
background: url("/image/logo.png") no-repeat center #ffffff / contain;
border: inset 10px transparent;
box-sizing: border-box;
}

这意味着您不必定义宽度。

定位背景图像，添加填充

更新答案:

Original Answer: