Tumblr博客：如何为Safari单独设置背景图？或替换为黑色背景

一、仅为Safari设置特定背景图 #

可以通过CSS媒体查询与特性检测的组合，精准定位Safari浏览器，单独为它配置适配的背景图：

• 先给所有浏览器设置通用的fixed背景图，再通过特殊规则覆盖Safari的样式，比如改用无fixed属性的背景图（避免模糊）：

/* 通用样式：非Safari浏览器使用fixed背景图 */
body {
  background-image: url('你的背景图地址');
  background-attachment: fixed;
  background-size: cover;
}

/* 仅匹配Safari浏览器的样式 */
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    body {
      background-image: url('适配Safari的背景图地址');
      background-attachment: scroll; /* 取消fixed属性解决模糊 */
      background-size: cover;
    }
  }
}

这个规则能精准识别桌面端和移动端的Safari，你可以给它单独使用分辨率适配的图片，或者去掉background-attachment:fixed来规避模糊问题。

二、改用黑色背景的替代方案 #

如果不想单独处理Safari的背景图，直接给Safari替换为纯黑色背景：

/* 通用样式：非Safari保留fixed背景图 */
body {
  background-image: url('你的背景图地址');
  background-attachment: fixed;
  background-size: cover;
}

/* 仅Safari显示黑色背景 */
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    body {
      background-image: none;
      background-color: black;
    }
  }
}

这样其他设备会正常显示你的fixed背景图，只有Safari会切换成纯黑色背景，彻底解决模糊问题。

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