SVG交互设计—无缝拼接

首页 / SVG交互🎠 / 正文

line-height="0"; 设置行高为0;为了保险,我们一般也会加上 margin:"0"padding="0" 设置外边距和内边距的值。

参考代码

<section style="line-height:0; margin:0; padding:0;">
<p>
<img src="图片链接">
</p>
<p>
<img src="图片链接">
</p>
<p>
<img src="图片链接">
</p>
<p>
<img src="图片链接">
</p>
</section>
注意:此无缝代码在部分安卓手机上拼接部分会显示一条白缝,可以用 margin-top解决此问题

参考代码

<section style="line-height:0; margin:0; padding:0;">
<p>
<img src="图片链接">
</p>
<p style="margin-top:-1px;">
<img src="图片链接">
</p>
<p style="margin-top:-1px;">
<img src="图片链接">
</p>
<p style="margin-top:-1px;">
<img src="图片链接">
</p>
</section>

其它实现办法

  • 直接使用秀米编辑器或135编辑器的无缝长图模板
  • 在微信公众号后台编辑器中选中需要无缝拼接的内容,左浮动后从第二张图开始设置 margin-top:-1
SVG
打赏
评论区
头像
    头像
    Taniszyc