我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
本文写一个简单的css小demo记录一下拆分九宫格的场景
本文使用vue3来进行编辑，为了熟悉vue3和参加掘金的码上掘金活动，这几天我会抽空多更新几个模块来进行写dome，写的时间比较有限，所以Ui也是尽量从简，功能还是比较完善的。文章的内容不多，欢迎大家阅读和批评指正。
今天实现一个图片九宫格的拆分效果，主要是通过动态的方式将图片拆分成九宫格，主要使用的是css 的background-position样式，熟练的使用起来就可以知道position的具体使用方法，position的偏移是图片的偏移，而不是视觉区域在图片上的偏移，具体可以看下面的解释
图片设置的大小和box大小相同的情况下，没有x和y之间的偏移，图片上覆盖在此时的视觉区域上的
当设置了图片的偏移后x：-150px，y：-150px，图片就会向上偏移
所以对于上图的九宫格，九个格口需要分别设置不同的position，最后按照左中右，上中下的定位进行偏移，对于我的偏移方法思路采用的是网上查找的，大家可以参考一下，然后设置hover移入的动态即可
