关于web app 背景图片兼容问题

 1. 目的

     
     
前几天接到资本主义家的通知，命我在一个星期内搞一个订餐web app出来。 于是乎，为了使得
menu与page在一起使用的时候拥有更多空间，我运用了jQuery mobile框架的Panel responsive。然，
原menu demo是没有 icon 的（图1），我的目的是让每个 li 有相应的 icon（图2）。

图1：

图2：

 2. 开工

在相应的 li 下添加以下代码：

    body #nav-panel .icon1{background:url(../images/index.png) no-repeat;    }

   

哈哈，背景有了。可是...图片却是这样的：

这是由于web与web app不同分辨率下图片显示的差别，于是接下来我们需要解决的是，在不同的分辨率下替换图片

代码如下：

<pre name="code" class="html">body #nav-panel .icon1{background:url(../images/index.png) no-repeat;background-image:-webkit-image-set(url(../images/index.png)12x,url(../images/index22.png)12x);}

里面添加了-webkit-image-set 这个属性，他是CSS4中对background-image属性定义的一种新方法。

接下来我们看看image-set的使用语法：

类似于不同的文本，图像也会显示成不同的：

1.  1、不支持image-set：在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像；
2.  2、支持image-set：如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像；
3.  3、Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像

于是图片正确的显示了出来：

可是，问题由来了，这是我在谷歌浏览器显示的页面

而在ie和火狐上显示的页面却还是跟没有添加-webkit-image-set 这个属性之前的页面一样。

这里的问题就是上面image-set的使用语法第一条，在不支持 image-set的浏览器下，浏览器会直接解析background-image中的背景图像,也就是说ie和火狐并不支持-webkit-image-set 这个属性。

于是我尝试运用一个很笨的方法来解决这个问题，就是直接改变图片的像素

代码如下：

body #nav-panel .icon1{background:url(../images/index2.png) no-repeat;background-image:-webkit-image-set(url(../images/index.png)12x,url(../images/index22.png)12x);}

把原本像素大小为302*263的index.png改为像素为25*24的index2.png,是的，事实证明这是一个很笨的方法

我解决了再浏览器上的兼容问题

然而我把app嵌入手机端的时候，Android系统上的图片的显示非常模糊，很明显，在高分辨率下，像素刚刚好的图片显示是不足导致模糊。

于是，我修改回原本像素大小为302*263的index.png，用background-size设置图片的大小

代码如下：

body #nav-panel .icon1{background:url(../images/index.png) no-repeat;-webkit-background-size: 25px 24px;background-size: 25px 24px;background-image:-webkit-image-set(url(../images/index.png)12x,url(../images/index.png)12x);}

哈哈~~搞定。

（注意，-webkit-background-size和background-size要在background下）

看似很简单的背景图片设置，里面却牵扯着分辨率和浏览器兼容问题，又涨姿势了~~~~~~

“第一在这里写博客，有什么写得不对或者不好的求不要吐！！！”