在桌面上，我们可以使用透明的页眉和页脚，您可以看到背景图片：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); }
答案 0 :(得分：0)
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/