第1850天:手机上锯齿背景图处理

星期四 阴 18~24℃

手机上锯齿背景图处理

在 iphone 上看没什么问题,但是在很多 android 机上就有怪异的问题了,锯齿上下会有线条,要不就是其他问题。

折腾了好长时间,觉得有必要记录一下。

图片:

1、

把这个图用 ps 循环复制,相当于 css 的 repeat-x,注意,每一格的尺寸是 2px,不是 1px,在 css 中用 background-size 来缩小。

2、

假设循环复制后的背景图尺寸是 1600 x 12,css 如下:

.saw {
 width: 100%;
 height: 5px;
 overflow: hidden;
 margin-top: -1px;
 background: url(saw.png) repeat-x;
 background-size: 800px 6px;
}

background-size 的高度是 6px,而实际需要的背景高度是 4px,往上偏移 -1px(margin-top),下方再多留 1px(background-size)

RSS

上一篇:

下一篇:

发表评论

电子邮件地址不会被公开。 必填项已用*标注