在桌面上我们有一个透明的页眉和页脚工作正常,你可以看到背景图片: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); }
最佳答案
RGBA 在移动浏览器上的支持有限:https://caniuse.com/#search=rgba
有一些技术可以为无法处理 rgba 值的浏览器提供回退。我注意到在您的网站 header 中,您有 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/
关于php - 透明背景颜色不适用于移动设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56446519/