透明背景颜色不在移动设备上工作

Question

在桌面上我们有一个透明的页眉和页脚工作正常，你可以看到背景图像： 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); } 

Answer 1

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/