background-image实现border效果及多图png如何实现background-size为原图一半

毛主席说过：三日不学习，赶不上刘少奇。

近两月疯赶项目，做得快要吐了，今日才有空浏览一下他人网站，收益良多，解决了我一直以来以为颇为棘手的两大难题。

一、background-image实现border效果

为何要这么费事？不直接用border呢？这是因为手机首页经常用九宫格来排列图片菜单，一般都是用百分比来平均分配每个格子的大小，如果格子再多1px的border，就会非常尴尬不好处理。

background-image的特点是占据元素整个尺寸，包括内边距和边框。

示例：

1. background-image: linear-gradient(to left, transparent 0%, transparent 50%, #d9d9d9 50%, #d9d9d9 100%);
2. -webkit-background-size: 1px 100%;
3. background-size: 1px 100%;
4. background-repeat: repeat-y !important;

也挺麻烦的，但也不失为解决问题的办法，列出以供扩展思路。

二、多图png如何实现background-size为原图一半

一般网站习惯将所有icon图标放到一张png格式的图里，一来是多icon的文件与单个icon的文件大小相差不大，可以更节省空间，另外就是便于加载。

但我之前在做手机网站的时候，因为图片的实际大小是放进去的图的两倍，这样可以实现高清效果，但是图片都放在一个文件的时候，用background-size总是不成功，只好分离成单独的文件来控制。现在参考别人的网站，发现别人实现了：

方法一：

整体：

.main-enter span, .knowlage i {

1. background: url("http://img.to8to.com/wap/v2/m3icon.png") no-repeat;
2.   50px;
3. height: 51px;
4. background-size: 50px; }//（注：此处只设置了一个值，表示宽度为50px，高度自动。仍相当于将原图整体缩小一半，原图大小为100*1580。）

具体的图标只需设置background-position：

.main-enter span.icon-zxgl-enter {

       background-position: 0 -58px;

}

方法二、

1. background: url(http://img.to8to.com/wap/v2/icon-se174a62dfa.png?v=20150515) no-repeat;
2. background-size: 187.5px 1087px;

直接对整张图进行压缩（图片原大小为375*2174）

具体该如何使用还需实际运用中试验。

理解：

background-size是针对background: url()里的整张图片的；

width、height和background-position才是定位取图片上哪一块内容的。

因此，如果background-size将原图进行了压缩的话，相应的width、height和background-position的值也要成倍压缩，切记！

另外还有以下一些值得学习的地方：

1.百度移动搜索协助适配PC与wap的标签：

<meta name="mobile-agent" content="format=html5;url=http://m.to8to.com/hz">

加上这一条，通过手机百度搜索时会自动导航到手机网站

2.主功能区用section标签

3.各部分代码块加上注释

4.canonical标签用来解决由于网址形式不同内容相同而造成的内容重复问题。

<link rel="canonical" href="http://hz.to8to.com/">

参考网站：土巴兔

http://hz.to8to.com/

http://m.to8to.com/hz