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

2013年6月13日星期四

星期四阴 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）

zhugao