Прозрачный цвет фона не работает на мобильных устройствах - PullRequest
Новая
       13

Прозрачный цвет фона не работает на мобильных устройствах

0 голосов
/ 04 июня 2019

На рабочем столе у ​​нас прозрачный верхний и нижний колонтитулы, работающие нормально, вы можете увидеть фоновое изображение: https://www.ontarioslakecountry.com/

Однако, как только мы перейдем на мобильное устройство на устройстве iOS или Android, оно будет отображаться как сплошное и не прозрачное. 

.site-header { background-color: rgba(0, 84, 166, 0.5); background: rgba(0, 84, 166, 0.5); color: rgba(0, 84, 166, 0.5); }

1 Ответ

0 голосов
/ 04 июня 2019

RGBA имеет несколько ограниченную поддержку в мобильных браузерах: https://caniuse.com/#search=rgba

Существуют некоторые методы обеспечения откатов для браузеров, которые не могут работать со значениями rgba. Я заметил в заголовке вашего сайта, у вас есть свойства css background-color и background, которые используют одно и то же значение.

Один из подходов состоит в том, чтобы использовать два разных правила background, в первом из которых значение устанавливается равным rgb, которое не поддерживаемые браузеры будут использовать в качестве запасного варианта: 

background: rgb(0, 84, 166); /* fallback color */
background: rgba(0, 84, 166, 0.5);

Существуют и другие подходы, в которых используются фильтры для обеспечения прозрачности в не поддерживающих браузерах. Вот хорошая статья, которая углубляется в: https://css -tricks.com / rgba-browser-support /

...