Question

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

这里位置“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;
}

如果我理解正确，背景位置用于控制背景图像的对齐。现在我需要控制对齐并从精灵中选择正确的图片。我不知道我是否可以将它们混合在一起。

谢谢

Answer 1

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

选项：

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

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

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

Answer 2

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

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

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

但是你无法将它与sprite techinque结合起来。此技术使用元素小于背景图像来剪切图像的事实，但您无法将背景图像剪切20个像素到元素中。

Answer 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）。这不起作用吗？

Answer 4

background-position属性允许百分比和值，例如“20px 0”，我认为这就是你要找的东西。

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

4 个答案: