css按坐标取背景图示例代码

下面就详细讲解一下“CSS按坐标取背景图示例代码”的攻略。

什么是按坐标取背景图？

按坐标取背景图就是从一张大背景图中，通过CSS样式取出背景图中的一个小块。常见的应用场景是利用一张大图，按照需求不同的坐标，显示出不同的图案或区域。

实现方法

CSS的background-position属性可以让我们非常方便地实现按坐标取背景图。该属性用于设置背景图片的起始位置。我们可以设置它的横向（X轴）和纵向（Y轴）坐标，以像素或百分比的形式表示。

下面给出一个简单的示例：

.selector {
    background-image: url('bigimage.jpg');
    background-position: -50px -100px;
}

在上面的代码中，我们设置了一个带有.selector类名的元素的背景图片为bigimage.jpg，并将其横向坐标设置为-50px，纵向坐标设置为-100px。这样，该元素就会以 (50, 100) 为起点，显示图片中相应坐标的位置处的图案。

示例说明

下面给出两个实际应用的示例。

示例一：拼图游戏

假设我们想要制作一个简单的拼图游戏，要求用户将一张6 * 6的拼图还原完整。我们可以先准备一张包含了所有拼图块的大图，再在CSS中设置每个拼图块的 background-position 属性，将拼图块从大图中取出。

例如，我们用下面的代码将第一行第一列的拼图块从大图中取出并显示：

.block1 {
    background-image: url('bigimage.jpg');
    background-position: 0 0; 
}

这里，我们将拼图块的起始位置设置为 (0, 0)，也就是图片的左上角。我们还需要在HTML中将每个拼图块以相应的类名添加到页面中。

<div class="block1"></div>

接下来，我们按照同样的方式为每个拼图块设置类名和 background-position 属性，最终得到一个完整的拼图游戏。

示例二：CSS雪碧图

CSS雪碧图是一种将多张小图片合并为一张大图的技术。它可以减少页面HTTP请求数量，从而提升页面性能。常见的应用场景包括网页图标和按钮等等。

下面以按钮为例，说明如何用按坐标取背景图的方式实现CSS雪碧图。

首先，我们需要准备一个包含了所有按钮的大图。

然后，我们可以用下面的代码将“提交”按钮取出并显示：

.btn-submit {
    background-image: url('sprite.png');
    background-position: -20px -20px; 
    width: 80px;
    height: 30px;
}

这里，我们将“提交”按钮的起始位置设置为 (20, 20)，并设置按钮的 width 和 height 属性，以确保它的大小与原图相同。

同样的方式，我们可以为其他按钮设置类名和 background-position 属性，最终得到一个包含多个按钮的CSS雪碧图。

至此，我们讲解了CSS按坐标取背景图的攻略，并通过两个实际应用示例进行了说明。希望这篇文章对您有所帮助！