CSS 定位背景图片，添加padding

Positioning background image, adding padding

提问by Ian Davis

I'd like to add a background to a div, position right center, but!, have some padding to the image. The div has padding for the text, so I want to indent the background a little. probably makes most sense w/ example:

我想向 div 添加背景，位置在右中心，但是！，对图像有一些填充。div 有文本填充，所以我想缩进一点背景。使用示例可能最有意义：

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

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

Thanks!

谢谢！

回答by Joseph Marikle

Updated Answer:

更新答案：

It's been commented multiple times that this is not the correct answer to this question, and I agree. Back when this answer was written, IE 9 was still new (about 8 months old) and many developers including myself needed a solution for <= IE 9. IE 9 is when IE started supporting background-origin. However, it's been over six and a half years, so here's the updated solution which I highly recommend over using an actual border. In case < IE 9 support is needed. My original answer can be found below the demo snippet. It uses an opaque border to simulate padding for background images.

多次评论说这不是这个问题的正确答案，我同意。在写这个答案时，IE 9 仍然是新的（大约 8 个月大），包括我自己在内的许多开发人员需要一个 <= IE 9 的解决方案。IE 9 是 IE开始支持background-origin. 然而，它已经超过六年半了，所以这里是更新的解决方案，我强烈建议使用实际边框。如果需要 < 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>

Original Answer:

原答案：

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

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

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

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

回答by John Fish

this is actually pretty easily done. You're almost there, doing what you've done with background-position: right center;. What is actually needed in this case is something very much like that. Let's convert these to percentages. We know that center=50%, so that's easy enough. Now, in order to get the padding you wanted, you need to position the background like so: background-position: 99% 50%.

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

The second, and more effective way of going about this, is to use the same background-positionidea, and just use background-position: 400px (width of parent) 50%;. Of course, this method requires a static width, but will give you the same thing every time.

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

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

方法一 (99% 50%)
方法二 (400px 50%)

回答by Hejar

There is actually a native solution to this, using the four-valuesto background-position

实际上有一个本地解决方案，使用四个值来背景位置

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

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

This means 10px from right and 20px from top. you can also use three valuesthe fourth value will be count as 0.

这意味着距右侧 10 像素和距顶部 20 像素。您也可以使用三个值，第四个值将被视为 0。

回答by Adrn

you can use background-origin:padding-box; and then add some padding where you want, for example: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;}This way you attach the image to the div padding box that contains it so you can position it wherever you want.

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

回答by JHair

In case anyone else needs to add padding to something with background-imageand background-size: containor cover, I used the following which is a nice way of doing it. You can replace the border-width with 10%or 2vwor whatever you like.

如果其他人需要为具有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;
}

This means you don't have to define a width.

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

回答by WhiteRau

first off, to be a bit of a henpeck, its best NOT to use justthe <background>tag. rather, use the proper, more specific, <background-image>tag.

第一关，是有点怕老婆的，它的最好不要用刚刚的<background>标签。相反，使用正确的、更具体的<background-image>标签。

the only way that i'm aware of to do such a thing is to build the padding intothe image by extending the matte. since the empty pixels aren't stripped, you have your padding right there. so if you need a 10px border, create 10px of empty pixels all around your image. this is mui simple in Photoshop, Fireworks, GIMP, &c.

我知道做这样的事情的唯一方法是通过扩展遮罩将填充构建到图像中。因为空像素没有被剥离，所以你的填充就在那里。因此，如果您需要 10 像素的边框，请在图像周围创建 10 像素的空像素。这在 Photoshop、Fireworks、GIMP 等中很简单。

i'd also recommend trying out the PNG8 format instead of the dying GIF... muchbetter.

我也建议尝试在PNG8格式而不是垂死GIF ... 多好。

there may be an alternate solution to your problem if we knew a bit more of how you're using it. :) it LOOKS like you're trying to add an accordion button. this would be best placed in the HTML because then you can target it with JavaScript/PHP; something you cannot do if it's in the background (at least not simply). in such a case, you can style the heck out of the image you currently have in CSS by using the following:

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

#hello img { padding: 10px; }

WR!

写！

回答by Ravi Khandelwal

To add space before background image, one could define the 'width' of element which is using 'background-image' object. And then to define a pixel value in 'background-position' property to create space from left side.

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

For example, I'd a scenario where I got a navigation menu which had a bullet before link item and the bullet graphic were changeable if corrosponding link turns into an active state. Further, the active link also had a background-color to show, and this background-color had approximate 15px padding both on left and right side of link item (so on left, it includes bullet icon of link too).

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

While padding-right fulfill the purpose to have background-color stretched upto 15px more on right of link text. The padding-left only added to space between link text and bullet.

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

So I took the width of background-color object from PSD design (for ex. 82px) and added that to li element (in a class created to show active state) and then I set background-position value to 20px. Which resulted in bullet icon shifted inside from the left edge. And its provided me desired output of having left padding before bullet icon used as background image.

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

Please note, you may need to adjust your padding / margin values accordingly, which may used either for space between link items or for spacing between bullet icon and link text.

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