更新答案：

Question

我想在div中添加背景，右侧居中，但是！对图像有一些填充。 div有文本的填充，所以我想稍微缩进背景。可能最有意义的例子：

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

谢谢！

Answer 1

更新答案：

多次评论说这不是这个问题的正确答案，我同意。回到这个答案时，IE 9仍然是新的（大约8个月），包括我自己在内的许多开发人员需要一个＆lt; = IE 9的解决方案.IE 9是IE started supporting background-origin的时候。然而，它已经超过六年半了，所以这里是我强烈建议使用实际边框的更新解决方案。如果＆lt;需要IE 9支持。我的原始答案可以在演示片段下面找到。它使用不透明边框来模拟背景图像的填充。

#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>

原始答案：

你可以使用与背景颜色相同的10px边框伪造它：

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;
}

Answer 2

实际上这很容易做到。你几乎就在那里，用background-position: right center;做你已经完成的事情。在这种情况下实际需要的是非常类似的东西。我们将这些转化为百分比。我们知道center = 50%，所以这很容易。现在，为了得到你想要的填充，你需要像这样定位背景：background-position: 99% 50%。

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

Method 1 (99% 50%)
Method 2 (400px 50%)

Answer 3

实际上有一个原生解决方案，使用四值到背景位置

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

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

Answer 4

你可以使用background-origin：padding-box;然后在您想要的位置添加一些填充，例如：#logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;} 这样您就可以将图像附加到包含它的div填充框中，这样您就可以将它放在任何您想要的位置。

Answer 5

如果其他人需要使用 background-image 和 background-size：contains 或 cover 添加填充，我使用了以下是一种很好的方式。您可以使用 10％或 2vw 或任何您喜欢的内容替换边框宽度。

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

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

Answer 6

首先，有点像henpeck，最好不要使用 <background>标签。相反，请使用正确的，更具体的<background-image>标记。

我知道做这种事情的唯一方法是通过扩展遮罩来将填充到图像中。因为没有剥离空像素，所以你的填充就在那里。因此，如果您需要10px边框，请在图像周围创建10px的空像素。这在Photoshop，Fireworks，GIMP和＆lt; c。

中很简单

我还建议您尝试使用PNG8格式而不是垂死的GIF ... 很多。

如果我们对你如何使用它有更多了解，那么你的问题可能会有另一种解决方案。 :)它看起来就像你正在尝试添加手风琴按钮。这最好放在HTML中，因为你可以用JavaScript / PHP来定位它;如果它在背景中你不能做的事情（至少不是简单的）。在这种情况下，您可以使用以下方法设置出CSS中当前图像的样式：

#hello img { padding: 10px; }

WR！

Answer 7

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

例如，我有一个场景，我有一个导航菜单，在链接项目之前有子弹，如果相应的链接变为活动状态，子弹图形可以更改。此外，活动链接还有一个背景颜色显示，这个背景颜色在链接项的左侧和右侧都有大约15px填充（所以在左侧，它也包括链接的子弹图标）。

虽然padding-right实现了在链接文本右侧将背景颜色拉伸多达15px的目的。 padding-left仅添加到链接文本和项目符号之间的空格。

所以我从PSD设计（例如82px）中获取了背景颜色对象的宽度，并将其添加到li元素（在创建显示活动状态的类中），然后我将背景位置值设置为20px。这导致子弹图标从左边缘向内移动。并且它为我提供了在子弹图标用作背景图像之前留下填充的所需输出。

请注意，您可能需要相应地调整填充/边距值，这可能用于链接项之间的空格或子弹图标和链接文本之间的间距。

定位背景图片，添加填充

7 个答案:

更新答案：

原始答案：