html中设置背景图像填充,CSS-定位背景图像，添加填充

CSS-定位背景图像，添加填充

这个问题在这里已有答案：

CSS：背景图片和填充                                     8个答案

我想将背景添加到div，位置居中，但是！对图像进行填充。 div的文本有填充，所以我想稍微缩进背景。 可能最有道理，例如：

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

谢谢！

7个解决方案

84 votes

更新答案：

有人多次评论这不是该问题的正确答案，我同意。 早在撰写此答案时，IE 9仍然是新的(大约8个月大)，包括我自己在内的许多开发人员都需要<= IE 9的解决方案。IE9是IE开始支持

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!

的时候。但是，已经超过6年半了。 年，所以这是我强烈建议您使用实际边框的更新解决方案。 如果需要

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!

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!

原答案：

您可以使用与背景颜色相同的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;

}

Joseph Marikle answered 2019-11-07T10:01:47Z

52 votes

这实际上很容易做到。 您几乎已经准备就绪，使用background-position: right center;所做的事情。在这种情况下，实际需要的是非常类似的东西。 让我们将其转换为百分比。 我们知道center = 50%，所以这很容易。 现在，为了获得所需的填充，您需要像这样放置背景：background-position: 99% 50%。

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

方法1(99％50％)

方法2(400px 50％)

John Fish answered 2019-11-07T10:02:36Z

10 votes

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

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

这表示右起10像素，顶起20像素。您还可以使用三个值，第四个值将计为0。

Hejar answered 2019-11-07T10:03:20Z

7 votes

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

Adrn answered 2019-11-07T10:03:50Z

2 votes

万一其他人需要在背景图像和背景尺寸的东西上添加填充：包含或覆盖，我使用了以下方法，这是一种很好的方法。 您可以将边框宽度替换为10％或2vw或任何您喜欢的值。

.bg-image {

background: url("/image/logo.png") no-repeat center #ffffff / contain;

border: inset 10px transparent;

box-sizing: border-box;

}

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

JHair answered 2019-11-07T10:04:31Z

0 votes

首先，要有点担心，最好不要仅使用标签。 而是使用正确的，更具体的标签。

我知道做这种事情的唯一方法是通过扩展遮罩将填充填充到图像中。 由于没有去除空像素，因此您可以在其中填充。 因此，如果需要10像素边框，请在图像周围创建10像素的空白像素。 这在Photoshop，Fireworks，GIMP和＆c中非常简单。

我还建议尝试使用PNG8格式，而不是快死的GIF ...更好。

如果我们对您的使用情况有更多了解，则可能有替代解决方案。 :)看起来就像您尝试添加手风琴按钮一样。 最好将其放在HTML中，因为这样您就可以使用JavaScript / PHP定位它； 如果它在后台(至少不是简单地)，您将无法执行某些操作。 在这种情况下，您可以使用以下方法在CSS当前图像中设置样式：

#hello img { padding: 10px; }

WR！

WhiteRau answered 2019-11-07T10:05:36Z

0 votes

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

例如，在一个场景中，我得到一个导航菜单，该菜单在链接项之前有一个项目符号，并且如果相应的链接变为活动状态，则项目符号图形也可以更改。 此外，活动链接还具有要显示的背景色，并且此链接背景色在链接项的左侧和右侧都有大约15px的填充(因此在左侧，它也包含链接的项目符号图标)。

右填充的目的是使背景颜色在链接文本的右侧延伸最多15像素。 左填充仅添加到链接文本和项目符号之间的空间。

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

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

Ravi Khandelwal answered 2019-11-07T10:06:33Z