Вопрос по android, css3 – CSS3 линейный градиент не работает на Android.

11

Вопрос новичка здесь, но по некоторым причинам я не могу понять это. У меня есть следующий 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   ответа
23

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/

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

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

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

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

-webkit-linear-gradient(bottom #000000 0%, #ffffff 100%)
Хороший, работал на меня.
1
background-color:#666633; //fallback
background:-webkit-linear-gradient(top, #666633,    #333300);  //webkit
background:-moz-linear- gradient(top, #666633, #333300) //mozilla

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

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

Похожие вопросы