在安卓设备上CSS3线性渐变不起作用。

Question

这里有一个新手问题，但我无法解决。我有以下CSS，它在我的iPhone上很好用，但在我的Android上不起作用。 从查看jQuery Mobile与android的演示中，我知道它可以处理背景渐变。谢谢。

.mydiv {
  background:    -moz-linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;
  background: -webkit-linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;
  background: linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;
}

- Evanss

Answer 1

根据 caniuse 网站，Android 4.0以下的浏览器使用旧版的 -webkit 语法：

background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a7cfdf), color-stop(100%, #23538a));

额外福利：我建议您使用类似于LESS或Compass/SASS的东西，这将节省您所有这些工作http://compass-style.org/

- Cmorales

---

安卓2.2是什么？我尝试了各种变化，但都不起作用。谢谢。 - Evanss

你尝试过哪些变化？你尝试过这个吗："background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));"？ - Cmorales

我自己进行了测试，只有旧的语法可以工作。我已经编辑了我的答案。 - Cmorales

注意，您可以使用background或background-image。 - Evanss

请注意，您可以通过添加更多的颜色停止点来添加两个以上的渐变点，例如：“background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a7cfdf), color-stop(40%, #23538a), color-stop(100%, #a7cfdf));”。 - dsomnus

Answer 2

我看到这个问题是因为在Android 2.2上使用线性渐变时遇到了问题。问题是，我们的线性渐变使用了新的角度系统。

-webkit-linear-gradient(to top #000000 0%, #ffffff 100%)

然而，旧版Android支持旧的角度系统（不使用to）。上面渐变的等效方式将是：

-webkit-linear-gradient(bottom #000000 0%, #ffffff 100%)

- applesElmi

Answer 3

background-color:#666633; //fallback
background:-webkit-linear-gradient(top, #666633,    #333300);  //webkit
background:-moz-linear- gradient(top, #666633, #333300) //mozilla

这个有效。

- Will

---

我得到了一个纯色，但根据这个网站http://www.impressivewebs.com/css3-linear-gradient-syntax/，“移动端支持线性渐变包括：iOS 3.2+，Opera Mini 5+，Opera Mobile 10+和Android浏览器2.1+。”而我的Android版本是2.2，所以应该可以工作。 - Evanss

很奇怪。在我的GNex上和4.0一起工作。这些天跟上CSS3语法真的很难。 - Will

也许 jQuery Mobile 的演示正在使用背景图片，但是如果没有任何类似 firebug 的工具，很难知道。 - Evanss

尝试使用background-image:而不是background。除此之外，我没有任何方法来测试Android 2.2如何处理渐变，所以我只能猜测。 - Will