朋友们大家好,我是三儿
有不少朋友刚排版时,总会遇到一个令人抓狂的问题。
“白缝!白缝!像白色衣服上的油点,令人难受!”
那么白缝问题应该如何解决呢?
且听我慢慢道来
三儿常遇见朋友说,在推文中放了几张图片,明明没有打空行就是有一小段缝隙无法消除,这时候我们只需要点击图片,选择[无缝]即可
如果图片数量不多,还能手动一张一张设置,要是图片数量很多该怎么办呢?
用全文图片样式呀。
“那我要是点了图片[无缝]还是能看到一丝白缝,阁下又该如何应对呢?”
三儿也曾遇到过这样的问题,明明用了无缝最后在某些手机机型上显示还是会有1px的耀眼白缝,有些则显示正常无缝,这时候应该怎么办呢?
如果你是一名排版老手应该就会知道:[margin-top -1px]
通俗来讲就是利用定位,咱们手动缩短图与图之间的位置距离。
margin-top是CSS的一个编程函数,功能是给元素设置上外边距。margin-top -1px 就是给元素设置一个-1距离的上外边距。
在实际操作中,我们不需要设置代码,仅需要点击图片在样式操作中选择[定位]设置一个-1前后间距即可。
“如果我是在SVG编辑器里制作内容,又该怎么取消缝隙呢?”
在SVG编辑器里,我们提供了很多无缝相关的组件,大家可以按需选择使用。
“如果我使用了无缝组件,在部分机型上预览还是出现了白缝,又该怎么办呢?”
在SVG编辑器中,我们提供了一个功能叫[去缝隙]开启后默认执行[margin-top/bottom -1px]
开启后再预览就能发现,白缝都消失了。
“如果我点击设置了无缝,又使用了定位还是有白缝呢?”
这时候我们就需要考虑是不是图片本身自带了1px的白色缝隙。