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

点击次数:180   更新时间2019-12-07     【关闭分    享:

  1、设置一个表格,我把它叫做总表格。在总表格中放入移动标签,用移动标签控制一个表格,我把这个表格叫做分表格。

  2、总表格中设置css相对定位样式。设置css相对定位样式的目的是:下面移动标签中设置css绝对定位样式与分表格中设置背景图片的定位参考点都要定位在总表格的左上角。还要设置表格的宽度,高度,边框线等属性。(详情见代码)

  3、移动标签中设置css绝对定位样式,设置移动屏幕的高度、宽度、移动方向、移动速度、边框线等属性。(详情见代码)

  4、分表格中设置背景图片定位的居上值与居左值,背景图片的高度与宽度等属性。(详情见代码)

  5、本节教程中我使用的图片规格:宽度为750px,高度为1055px。

  7、总表格的宽度=移动屏幕宽度+总表格边框线、分表格的规格就是背景图片的规格。因为我们要裁剪图片的下部155px,所以,分表格中宽度不变,高度减小155px。背景图片定位的居上值与居左值都是0px。

  第一个移动图片你会设置了,第二个移动图片就好办了!你只要把背景图片的居上值修改为:-155px就行了,背景图片的上部就裁剪掉155px了。

  裁剪右部,背景图片的高度必须是原来的高度欧!也就是1055p。因此,分表格的高度要设置为1055px。

  宽度呢?因为背景图片要裁剪右部150px,所以宽度是:750-150=600(px),总表格的宽度也要减小欧!总表格的宽度=790-150=640(px)

  背景图片裁剪左部155px,只要将第三个移动图的代码修改一个数据就行。就是将背景图片的居左值修改为:-150px。

  朋友,你弄懂了没有呀?你试试吧。如果有什么问题,就与我联系欧!欢迎咨询!欢迎商榷!欢迎提出批评意见欧!