透明背景顏色不在移動設備上工作

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/