【发布时间】：2012-03-27 17:33:11
【问题描述】：
我们假设我们有以下图像（是一个带有 4 个单选按钮的单个文件，看起来相同，但例如，图标可能不同）：
前段时间，我看到了如何通过在 CSS 样式中指定背景位置来获取图像。怎么做 ？
意思是，如何在 CSS 中从右下角获取图标，而不是将该文件分别拆分为四个图标？
对不起，如果这个问题已经过时，但我是 CSS 的初学者。
【问题讨论】：
【发布时间】：2012-03-27 17:33:11
【问题描述】：
【讨论】：
假设您的图像为 100 x 100 像素，每个按钮占用 50 x 50 像素（包括一些可能的空白）。
背景图像的定位从左上角开始。所以 0, 0。
您的 CSS 可能如下所示：
background-image: url( ../images/button-sprite.png);
background-position: 0, 0; // top left
background-position: -50px, 0; // top right
background-position: 0, -50px; // bottom left
background-position: -50px, -50px; // bottom right
并不是说以上内容不应该一起使用。您可以为每个按钮使用单独的 background-position。
有时定位可能看起来不直观，因为您通常会使用负值来获取您需要的图像部分。
我倾向于提醒自己，如果我要为元素添加填充，它会将其向下推。背景定位基本相同。如果我们使用 50px（正），我们将“将图像向下推”而不是将其拉到我们需要的位置。有意义吗？
【讨论】：
您可以通过 background-position in top,left,bottom,right 来调整 css 中的 sprite 图片。
在css背景位置：-
background-position:top,left 指的是正值，例如：-如果需要从顶部，左侧的精灵图像，因此您可以提供正值来调整图像，例如：-
background-position: 5, 10; // top left
所以上面提到的这个位置将调整顶部和左侧的背景位置。
如果你需要右下角的背景位置，那么你可以使用该方法
background-position: 0, -50px; // bottom left
background-position: -50px, -50px; // bottom right
所以上面提到的这个位置将调整底部和右侧的背景位置。
【讨论】：
所以你正在使用图像精灵。
使用 CSS，我们可以只显示我们需要的图像部分。
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
【讨论】：
Jangid 的回答不太正确。
使用 CSS，我们可以只显示我们需要的图像部分。
这不是真的；目前没有 CSS 允许从精灵图像中“剪切”一个区域。唯一可能的是按照标准设置定位（左、上、右、下或偏移）。
如果您的图形将用作 FLUID 元素的背景（即具有自动高度/宽度），您必须确保您的图像间隔足够好。如果您没有将它们隔开，那么您很可能会在背景中看到不止一张图片，而不仅仅是您想要的部分。
例如，您的精灵包含 36 张图片，全部为 32px 正方形，整齐地排列在 40px 的网格上。
如果你应用背景图片的元素比40px更宽和/或更高，你会看到其他图片的一部分作为背景，这显然不能令人满意。
希望这会有所帮助。
【讨论】：