CSS background-image在Safari（iPhone6/7/8等）失效求助，其他浏览器正常

这问题我碰到过好多次了，旧款iPhone（6/7/8这类机型）搭载的Safari（对应iOS 13及以下版本）不支持WebP图片格式，这就是你遇到的核心问题。你的CSS代码里，后面的WebP背景图声明直接覆盖了前面的PNG，导致不支持WebP的Safari既识别不了WebP，又用不上原本的PNG fallback，自然就显示空白了。

下面给你几个靠谱的解决方案：

方案1：用CSS特性检测实现优雅降级 #

通过@supports规则，让支持WebP的浏览器用WebP，不支持的自动用PNG，代码调整如下：

.logo {
  background-image: url("/assets/img/logo.png");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 200px;
  height: 100%;
}

/* 检测浏览器是否支持WebP背景图 */
@supports (background-image: url("data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==")) {
  .logo {
    background-image: url("/assets/img/logo.webp");
  }
}

这里用了一个极小的WebP占位图做检测，不会额外加载资源，兼容性也很可靠。

方案2：先确认PNG文件是否可用 #

有时候问题可能出在PNG文件本身，你可以先验证一下：

• 在iPhone的Safari里直接访问 http://plocastinamestajleske.com/assets/img/logo.png
• 如果图片打不开，说明路径写错了或者文件没上传好，先把这个问题解决，旧版Safari就能正常显示PNG了。

额外小提示 #

如果你的项目要兼容更多超旧浏览器，也可以用JS检测WebP支持性，动态给元素加类来切换背景图，但上面的@supports方案已经足够简洁好用，优先推荐这个。

内容的提问来源于stack exchange，提问作者Darko