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

Question

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

此处“0 -470px”位置用于从 sprite 中选择正确的图片。而且我不知道如何应用 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;
} 

如果我没理解错的话，background-position是用来控制背景图片的对齐方式的。现在我需要控制对齐并从 Sprite 中选择正确的图片。我不知道我是否可以将它们混合在一起。

谢谢

Answer 1

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

选项:

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

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

鉴于您正在尝试使用 sprite 执行此操作，两者都是可能的选择，因为无论如何 sprite 都必须具有固定大小的容器。对于选项 1，您需要确保您的 sprite 图像在文件中彼此之间有足够的空白。