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

Question

On desktop we have a transparent header and footer working fine, you can see the background image: https://www.ontarioslakecountry.com/

However, once we go into mobile on a iOS or Android device, it shows as solid and not transparent.

 .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 has somewhat limited support on mobile browsers: https://caniuse.com/#search=rgba

There are some techniques for providing fallbacks to browsers that cannot deal with the rgba values. I noticed in your site header, you have css background-color and background properties both using the same value.

One approach is to use two different background rules with the first one set the value to a rgb value that non-supporting browsers will use as a fallback:

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

There are other approaches that use filters to try and maintain the transparency on non-supporting browsers. Here is a good article that goes into more depth: https://css-tricks.com/rgba-browser-support/