分享

背景图片定位裁剪移动(代码教程)

 春天没来 2018-01-10

背景图片定位裁剪移动(代码教程)

上图裁剪掉下部155px

上图裁剪掉上部155px

上图裁剪掉右部150px

上图裁剪掉左部150px

背景图片定位裁剪怎样应用?本节教程与友友们共享。
一、先讲第一个移动图:(裁剪背景图片下部155px)
1、设置一个表格,我把它叫做总表格。在总表格中放入移动标签,用移动标签控制一个表格,我把这个表格叫做分表格。
2、总表格中设置css相对定位样式。设置css相对定位样式的目的是:下面移动标签中设置css绝对定位样式与分表格中设置背景图片的定位参考点都要定位在总表格的左上角。还要设置表格的宽度,高度,边框线等属性。(详情见代码)
3、移动标签中设置css绝对定位样式,设置移动屏幕的高度、宽度、移动方向、移动速度、边框线等属性。(详情见代码)
4、分表格中设置背景图片定位的居上值与居左值,背景图片的高度与宽度等属性。(详情见代码)
5、本节教程中我使用的图片规格:宽度为750px,高度为1055px。
6、总表格的高度=移动屏幕高度+总表格边框线宽度×2+移动屏幕边框线宽度×2+移动屏幕居上值×2=130+15×2+5×2+5×2=180(px)
7、总表格的宽度=移动屏幕宽度+总表格边框线宽度×2+移动屏幕边框线宽度×2=750+15×2+5×2=790(px)
8、分表格的规格就是背景图片的规格。因为我们要裁剪图片的下部155px,所以,分表格中宽度不变,高度减小155px。背景图片定位的居上值与居左值都是0px。
二、第二个移动图:(裁剪背景图片上部155px)
第一个移动图片你会设置了,第二个移动图片就好办了!你只要把背景图片的居上值修改为:-155px就行了,背景图片的上部就裁剪掉155px了。
二、第三个移动图:(裁剪背景图片右部150px)
裁剪右部,背景图片的高度必须是原来的高度欧!也就是1055p。因此,分表格的高度要设置为1055px。
宽度呢?因为背景图片要裁剪右部150px,所以宽度是:750-150=600(px),总表格的宽度也要减小欧!总表格的宽度=790-150=640(px)
背景图片定位的居上值与居左值都要设置为0px。
其它的数据就不变了。
二、第四个移动图:(裁剪背景图片左部155px)
背景图片裁剪左部155px,只要将第三个移动图的代码修改一个数据就行。就是将背景图片的居左值修改为:-150px。
朋友,你弄懂了没有呀?你试试吧。如果有什么问题,就与我联系欧!欢迎咨询!欢迎商榷!欢迎提出批评意见欧!
“春天没来”编撰
2018年1月10日于北京

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多