CSS3 линейный градиент не работает на Android.

Вопрос новичка здесь, но по некоторым причинам я не могу понять это. У меня есть следующий CSS, который отлично работает на моем iPhone, но не на моем Android. Глядя на демоверсии jQuery Mobile с android, я знаю, что он может справиться с градиентами фона. Спасибо

<code>.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;
}
</code>

Ответы на вопрос(3)

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

Это работает.

 Evanss10 мая 2012 г., 17:59
Может быть, в демо-версиях jQuery Mobile используются фоновые изображения, но их трудно понять, если не использовать какой-либо тип firebug.
 10 мая 2012 г., 19:02
Попробуйте использовать background-image: вместо фона. Кроме этого, у меня нет никакого способа проверить, как именно Android 2.2 обрабатывает градиенты, так что я могу только догадываться.
 Evanss10 мая 2012 г., 17:26
Я получаю сплошной цвет, но в соответствии с этим сайтомimpressivewebs.com/css3-linear-gradient-syntax & quot; Мобильная поддержка линейных градиентов включает в себя: iOS 3.2+, Opera Mini 5+, Opera Mobile 10+ и Android Browser 2.1+. & quot; а у меня андроид 2.2 так что должно работать.
 10 мая 2012 г., 17:58
Это странно. Работает на моем GNex с 4.0. В наши дни очень сложно поддерживать синтаксис CSS3.
Решение Вопроса

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/

 Evanss29 мая 2012 г., 13:50
Обратите внимание, вы можете использовать background или background-image.
 10 мая 2012 г., 19:07
Какие варианты вы пробовали? Пробовали ли вы этот «фон»: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # 000000), остановка цвета (100%, #ffffff)); & quot; ?
 10 мая 2012 г., 19:18
Я проверял это сам, и работает только старый синтаксис. Я отредактировал свой ответ.
 Evanss10 мая 2012 г., 17:27
Что это за Android 2.2? Каждый вариант, который я пробовал делать, работал. Спасибо
 14 авг. 2012 г., 21:58
обратите внимание, что вы можете добавить более двух точек градиента, добавив больше цветовых остановок, например: & quot; background-image: -webkit-градиент (линейный, левый верхний, левый нижний, цветовой стоп (0%, # a7cfdf) color-stop (40%, # 23538a), color-stop (100%, # a7cfdf)); & quot ;.

Я столкнулся с этим вопросом, потому что у меня были проблемы с линейными градиентами на Android 2.2. Проблема была в том, что наш линейный градиент использовал новую систему углов

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

однако более старые Android поддерживают старую систему углов (безto). Эквивалент вышеуказанного градиента будет

-webkit-linear-gradient(bottom #000000 0%, #ffffff 100%)
 19 дек. 2015 г., 02:22
Хороший, работал на меня.

Ваш ответ на вопрос