- 最近想重新设计一下管理页面，然后布局排版样式框架都已经做好了
1.png
- 但是插入的图片太多了，我知道css有background-position切图的方法
- 立马用ps把几个图片给他合并了
- 原理是就是通过定位背景图片的起始位置，然后宽高以div设置的宽高为面积
- 使得需要定位的背景图片中某个需要切出来的起始位置的像素（水平位置）跟结束位置（垂直位置）重合
- 切出这个位置的图片，进行使用，这样使用一个大图就可以使用立马的某个子图
- 背景图定位的background-position水平位置 + 垂直位置= 切出来的子图
- 这么说可能一脸懵逼，我这里就用我这个图说明一下（我这个图片是随便画的，所以不对称，不要介意）
- X轴和Y轴的交叉零点，坐标为(0,0)，上下都是负数，根据左右的像素定位就可以切片
- 举个例子，我现在需要第二排第一个的小房子，那我需要知道他它的开始位置
- 然后知道他的对角线的位置，就可以切片了，用ps可以计算
- 它的x轴位置是-78px，Y轴是-10px就可以进行切片了
- 紫色为x轴，红色为Y轴，通过对角线进行切片就得到了一个正方形，里面就是这个切出来的子图
- 然后就可以使用这个图片了，当然我这里只是说了一下他的原理，现在再来说一下我遇见的问题
- 图片切片出来了，但是我使用背景图片不生效
- 既然直接设置背景不行(因为子级继承了父级的该属性然后冲突了，以至于不显示，其实是加载成功了的)
- 这时想到两个方法第一个是clear另外一个是content
- 第一个不用说，完成是没问题，但是清除了父级的属性，后面的要重新进行设置
- 不利于后期修改，第二个使用content伪类插入设置属性
- 因为我想通过层集定位图标，所以去掉了那个<span class="img"></span>的标签，不然每一行都要写一个太麻烦了，现在外面来看一下效果
- 背景图已经插入成功了，但是content把他挤上去了，使用center也没用，然后想到了margin-top进行定位，把他加上去
- 完美解决定位问题
【CSS切图的实现以及对齐】
完结
随机文章
该文章已经关闭评论,评论请前往留言信箱