是否可以在背景图像和包含图像的容器之间创建边距/填充?换句话说,我需要将背景图像 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 中选择正确的图片。我不知道我是否可以将它们混合在一起。
谢谢
最佳答案
不,背景图像没有填充/边距的概念。
选项:
1) 定位背景(如前所述)。关键是容器必须具有固定尺寸。
2) 将容器嵌套在父容器中。父项获取填充,子项获取背景图像。
鉴于您正在尝试使用 sprite 执行此操作,两者都是可能的选择,因为无论如何 sprite 都必须具有固定大小的容器。对于选项 1,您需要确保您的 sprite 图像在文件中彼此之间有足够的空白。
关于CSS - 如何控制背景图像和容器之间的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3577158/