点9图下载-公众号文章点击数字9是什么意思

这里只是一个怕自己忘记写的一个笔记,不是很全很详细,建议还是看 官方教程

图片原始像素是348 x 220

我的需求是拉伸image可以自适应内容长度,但是拉伸不能导致两边的半圆被拉成椭圆

border-image可以使用图片作为border(标准说法:border-image CSS属性允许在元素的边框上绘制图像), 给出图片后可以通过相应的参数来调整图片的拉伸,这样就可以像点9图那样保留部分内容不变的情况下,拉伸可拉伸部分来自适应。

我主要解释一下 border-image: url("") 0 170 0 170 fill / 1px 170px stretch ,

这里0 170 0 170就是划分了原始图片内容,称之为border-image-slice

后面的 1px 170px 指的是border-image-width ,字面意思是边框图片宽度,作用是将 DOM 节点分割成九宫格,这里指的就是作为实际容器的那个节点的显示范围了,我也设置为170, stretch作为border-image-repeat说明图片在超过原始长度后使用拉伸的方式

这里有更易读,更详细的文章 border-image的正解用法

点九图编辑器

(这个加载不出预览图)

(这个可以加载出预览图)

公众号文章经常会使用各种各样的方式排版图片,九宫格样式就是其中非常常见的一种,不过很多人却不知道怎么实现,用什么样的方法能够做出这样的效果,今天就为大家带来三种方法教你做九宫格拼图,一起看下吧。



1、使用编辑器样式

在很多微信编辑器中都有拼图样式,例如打开96微信编辑器,按图中所示进行搜索,就能看到很多类型的九宫格拼图,有的还具有滑动效果。选择喜欢的样式,在编辑区点击相应图片,进行换图即可,就能实现九宫格拼图排版了。



2、使用编辑器自带的拼图功能

除了使用九宫格样式,还可以使用编辑器自带的拼图功能,上传一张图片,选中图片,点击拼图。进入拼图编辑之后,选择模板,点击添加图片,添加另外的八张图片,就会有相应的九宫格模板出现,选择喜欢的样式,拖动图片调整展示的位置,最后点击确定,就会将图片添加到编辑区了。





3、使用拼图软件

可以使用带有拼图功能的软件,比较常用的就是美图秀秀,打开软件,点击拼图之后,上传九张图片,点击模板拼图,在右边点击数字9,就会出现九张图片的模板了,点击九宫格样式,图片就会自动排版。可以替换图片,也可以拖动图片调整位置,完成之后点击保存并分享,就可以将图片下载下来。然后在文章排版的时候插入做好的图片即可。





如果想让一张图片切成九宫格的样式,可以点击主页更多功能里面的九格切图就能实现,还可以选择形状、特效,最后点击保存到本地就完成了。



以上就是介绍的三种九宫格拼图的方法,前两种直接在编辑器排版中使用,无法下载下来,第三种可以下载保存成图片,相对来说比较自由,就看你使用哪种方法更顺手了

andriod程序在把文件打包成apk的时候,程序会自动把*.9.png图片边缘的黑线去掉