定位背景图片，添加填充[重复]

问题描述 投票：0回答：7

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

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

谢谢！

css background-image
7个回答
130
投票

更新答案：

多次评论说这不是这个问题的正确答案，我同意。 当写这个答案时，IE 9 还是新的（大约 8 个月大），包括我自己在内的许多开发人员需要一个解决方案来<= IE 9. IE 9 is when IE 开始支持 

background-origin
。 然而，已经过去六年半了，所以这是我强烈推荐使用实际边框的更新解决方案。万一 < 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.

#hello {
  padding-right: 10px;
  background-color:green;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ+Ih5AAAAElBMVEVVzFX///9q0mqU35R/2H+q5ar/AMDXAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAMklEQVQImWNgIAIwKUAZyk4g0pSBwUWBhcGBiZmBQcWFwZiBAcgAYghDxQQoBRYhAQAAzeEC4AKpepUAAAAASUVORK5CYII=") 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;
}
57
投票

这实际上很容易完成。您已经快完成了，正在做您用 

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%）

15
投票

实际上有一个本机解决方案，使用 four-values 到背景位置

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

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

8
投票

你可以使用background-origin:padding-box;然后在你想要的地方添加一些填充，例如：

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

8
投票

如果其他人需要使用 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;
}

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

0
投票

首先，作为一个怕老婆的人，最好不要使用 just 

<background>
标签。 相反，使用正确的、更具体的 
<background-image>
标签。

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

我还建议尝试 PNG8 格式，而不是垂死的 GIF...

更好。

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

#hello img { padding: 10px; }
写！

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

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

padding-right 可以实现将背景颜色在链接文本右侧拉伸最多 15 像素的目的。左填充仅添加到链接文本和项目符号之间的空间。

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.