CSS3 кроссбраузерный градиентный фон с rgb / rgba и отступлениями - PullRequest
3 голосов
/ 11 сентября 2011

Я хочу попробовать получить эффект кросс-браузерного градиента, работающий со значениями rgb с отступлением на случай, если браузер его не поддерживает.

Пример jsFiddle: http://jsfiddle.net/HelloJoe/hUxdh/

Я думаю, что я рассмотрел большинство браузеров, но у меня есть несколько вопросов:

  1. Существуют ли какие-либо другие пропущенные мной браузеры, которые обычно используются, а также какие свойствапонадобится для таких устройств, как iPad / SmartPhones, или они будут визуализироваться из одного из используемых в настоящее время свойств?

  2. Если случайно градиент не визуализируется, имеет оригинал background: rgb(50, 50, 50); достаточно, чтобы создать только сплошной цвет?

  3. При значении filter я не смог заставить его работать, используя значения rgb, и мне пришлось прибегнуть к использованию *Вместо этого значение 1022 *, не то чтобы это была огромная проблема, но я пытаюсь использовать только значения rgb.Есть ли способ обойти это или он просто не принимает их?

  4. Если бы я использовал rgba вместо rgb, тогда мне понадобился бы градиент rgbaфоновое значение, rgb градиентное фоновое значение в качестве запасного варианта для не рендеринга альфа-прозрачности, а затем сплошной фоновый отступ в случае, если градиент вообще не отображался?Или браузер проигнорирует значение альфа-прозрачности и просто отобразит rgb из rgba без отдельного отступления rgb фона?

  5. В качестве окончательного отката для всегобудет ли необходимо иметь значение hex в начале свойств CSS?Я полагаю, что нет ничего страшного в добавлении значения hex, но идея использования rgb заключается в том, что если rgba можно использовать, это позволяет быстро и легко менять цвет по всему сайту.Таким образом, возврат к значению hex сделает использование rgb/rgba бессмысленным для того, для чего я собираюсь его использовать, поскольку мне все равно придется просмотреть и отредактировать все значения hex.

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

1 Ответ

6 голосов
/ 11 сентября 2011

Могу ли я предложить вам этот сайт, чтобы помочь вам с вашими градиентами и отступлениями:
http://www.colorzilla.com/gradient-editor/

...