276 次浏览【转载需注明来源】
在上一章中,讲解了背景图像的显示方式;那么本章老师会带领大家学习背景图像的内容显示位置。
在CSS中,可以通过背景-位置属性来更改图像在背景中的显示位置,例如<区块>的标签大小是200*200,而背景图像的大小远远超越了200*200;这时默认情况下无法在区块标签中将背景图像完全显示出来;于是我们会有这样的需求:能否指定显示某一部分的图像?例如:显示左上角200*200或者右下角200*200的图像。
如果要实现上述的需求,则需要使用到:背景-位置属性CSS命令,背景-位置属性可以直接设置起始显示的X和Y坐标,参考如下代码:
首先假设我们需要显示的图像为下方这一张图片:
<样式>
.背景图像{
背景-图像: 地址('@文件_大图.png');
宽度: 300px;
高度: 300px;
背景-位置: 100px 200px;
}
</样式>
<区块 类名="背景图像">
</区块>
上述代码效果展示:
知识点:背景-位置属性的值有两个参数,以空格分开;第一个参数为X坐标,第二个参数为Y坐标。
知识点:如果只填第一个参数,不填第二个参数则第二个参数默认纵向居中。
只填写第一个参数不填写第二个参数代码示例:
知识点:在上述的示例中可以看见,参数二不输入的情况下默认居中,同时背景-位置属性不仅可以直接设置显示的X和Y坐标,也可以设置专属的方向值,可以设置的方向值如下:
一段横向靠右,纵向居中显示的代码如下:
.背景图像3{
背景-图像: 地址('@文件_大图.png');
宽度: 600px;
高度: 300px;
背景-位置: 右侧 居中;
}
</样式>
<区块 类名="背景图像3">
</区块>
代码展示效果如下:
点击本处跳转案例下载:点击下载本文实例
测试账号