CSS - 如何控制背景图像和容器之间的间隙答案

【问题标题】：CSS - How to control the gap between background image and containerCSS - 如何控制背景图像和容器之间的间隙
【发布时间】：2010-08-26 16:20:59
【问题描述】：

我是否可以在背景图像和保存图像的容器之间创建边距/填充？也就是说，我需要将背景图片 sprite_global_v3.png 移动到#nav-primary 左边框的右侧20px。

这里位置“0 -470px”用于从精灵中选择正确的图片。而且我不知道如何应用 20px 的填充/边距以达到我的预期。

#nav-primary {
    background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}

<div id="nav-primary">
  <span>Hello World</span>
</div>

基于http://www.w3schools.com/css/css_background.asp

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

如果我理解正确的话，背景位置是用来控制背景图像的对齐方式的。现在我需要控制对齐并从精灵中选择正确的图片。不知道能不能混在一起。

谢谢

【问题讨论】：

标签： css

【解决方案1】：

不，背景图像没有填充/边距的概念。

选项：

1) 定位背景（如前所述）。关键是容器必须有固定的尺寸。

2) 将容器嵌套在父容器中。父级获取填充，子级获取背景图像。

鉴于您尝试使用精灵来执行此操作，这两种方法都可能是因为精灵必须有一个固定大小的容器。对于选项 1，您需要确保您的精灵图像在文件中彼此之间有足够的空白空间。

【讨论】：

感谢您让我知道“精灵必须有一个固定大小的容器”
我应该澄清...容器必须至少在一个维度上固定，这取决于您如何在精灵中布局图像。例如，如果它们都是垂直分开的，那么你的容器需要至少有一个固定的高度，这样精灵中的下一个图像就不会显示。

【解决方案2】：

不，您不能将它们混合在一起。

您可以将图像放置在与角落的偏移处：

background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: 20px 20px;

但是你不能把它和精灵技术结合起来。该技术利用元素小于背景图像的事实来裁剪图像，但不能将背景图像裁剪到元素中 20 像素。

【讨论】：

【解决方案3】：

您可以指定像素背景的确切位置。

如果您希望左侧有 10 像素的间隙，例如：

#nav-primary {
  background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png")   no-repeat scroll transparent;
  background-position:10px 0px;
}

话虽如此，您似乎已经指定将其设置为 (0, -470)。不行吗？

【讨论】：

Hello Dutchie432, (0, -470) 用于选择嵌入在巨大精灵图片中的正确图片。现在我还想控制背景和容器之间的间隙/边距。但我不知道如何将这两者混合在一起。谢谢
(0, -470) 正在设置背景位置属性。如果你想要右边 10 像素的间隙，你可以让它 (10, -470)...

【解决方案4】：

背景位置属性允许百分比和值，例如“20px 0”，我想这就是你要找的。p>

【讨论】：