在上一章中，讲解了背景图像的显示方式；那么本章老师会带领大家学习背景图像的内容显示位置。

在CSS中，可以通过背景-位置属性来更改图像在背景中的显示位置，例如<区块>的标签大小是200*200，而背景图像的大小远远超越了200*200；这时默认情况下无法在区块标签中将背景图像完全显示出来；于是我们会有这样的需求：能否指定显示某一部分的图像？例如：显示左上角200*200或者右下角200*200的图像。

如果要实现上述的需求，则需要使用到：背景-位置属性CSS命令，背景-位置属性可以直接设置起始显示的X和Y坐标，参考如下代码：

首先假设我们需要显示的图像为下方这一张图片：

<样式>
.背景图像{
  背景-图像: 地址('@文件_大图.png');
  宽度: 300px;
  高度: 300px;
  背景-位置: 100px 200px;
}
</样式>
<区块 类名="背景图像">

</区块>

上述代码效果展示：

知识点：背景-位置属性的值有两个参数，以空格分开；第一个参数为X坐标，第二个参数为Y坐标。

知识点：如果只填第一个参数，不填第二个参数则第二个参数默认纵向居中。

只填写第一个参数不填写第二个参数代码示例：

知识点：在上述的示例中可以看见，参数二不输入的情况下默认居中，同时背景-位置属性不仅可以直接设置显示的X和Y坐标，也可以设置专属的方向值，可以设置的方向值如下：

1. 左侧
2. 右侧
3. 顶部
4. 底部
5. 居中

一段横向靠右，纵向居中显示的代码如下：

.背景图像3{
  背景-图像: 地址('@文件_大图.png');
  宽度: 600px;
  高度: 300px;
  背景-位置: 右侧 居中;
}
</样式>
<区块 类名="背景图像3">

</区块>

代码展示效果如下：

 

点击本处跳转案例下载：点击下载本文实例