当前博客:50-快码FOF中文编程CSS设置背景图像的显示位置

276 次浏览【转载需注明来源】

博客作者:【快码FOF编程】

个性签名:寒窗苦读十年一朝凤舞九天

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

在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">

</区块>

代码展示效果如下:

 

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

50-快码FOF中文编程CSS设置背景图像的显示位置