CSS - 如何控制背景图像和容器之间的差距 [英] CSS - How to control the gap between background image and container

问题描述

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

Is it possible that I can create a margin/padding between the background image and container that holds the image? In other words, I need to move the background image sprite_global_v3.png 20px to the right of the left border of #nav-primary.

这里的位置是0 -470px 用于从sprite中选择正确的图片。我不知道如何应用填充/边距20px，以实现我的预期。

Here the position "0 -470px" are used to pick the right picture from sprite. And I don't know how to apply a padding/margin of 20px in order to achieve what I expected.

#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;
} 

如果我理解正确，背景位置用于控制背景图像。现在我需要控制对齐，并从一个精灵选择正确的图片。

If I understood correctly, the background-position is used to control the alignment of the background image. Now I need to control alignment and choose the right picture from a sprite. I don't know whether or not I can mix it together.

谢谢

推荐答案

否，没有背景图片的填充/边距的概念。

No, there is no concept of padding/margin for background images.

选项：

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

1) Positioning the background (as already stated). The key is that the container would have to have fixed dimensions.

2）将容器嵌套在父容器中。父项获得填充，子项获得背景图片。

2) Nest a container inside a parent container. Parent gets the padding, child gets the background image.

由于你想用sprite做这个，因为sprite必须有一个固定的无论如何，大小容器。对于选项1，你需要确保你的sprite图像在文件中的相互之间有足够的空格。

Given that you are trying to do this with a sprite, both are likely options since a sprite has to have a fixed sized container anyways. For option 1, you'd need to make sure your sprite images have enough white space between each other in the file.

这篇关于CSS - 如何控制背景图像和容器之间的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！