如何在浏览器允许的情况下为背景加载webp图像-img，而不加载png？

要在浏览器允许的情况下为背景加载webp图像而不加载png，可以使用以下方法：

检测浏览器对webp格式的支持：在网页加载时，通过JavaScript代码检测浏览器是否支持webp图像格式。可以使用以下代码：

function checkWebpSupport(callback) {
  var webpImage = new Image();
  webpImage.onload = webpImage.onerror = function() {
    callback(webpImage.height === 2);
  };
  webpImage.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bAABIWBAICAAAAAABABgAAQABmcGdtTXU0AACjVAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMLAAcADsASAAQABkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUUUAAgADQAuADQAyAAR8AAPAACAAAACAAACEAAADH//w==';
}

checkWebpSupport(function(supported) {
  if (supported) {
    // 在此加载webp图像
    document.body.style.backgroundImage = 'url(/path/to/image.webp)';
  } else {
    // 在此加载png图像
    document.body.style.backgroundImage = 'url(/path/to/image.png)';
  }
});

使用CSS媒体查询：利用CSS媒体查询，根据浏览器是否支持webp格式来加载相应的图像。可以使用以下代码：

@media (supports: (image/webp)) {
  body {
    background-image: url(/path/to/image.webp);
  }
}

@media not (supports: (image/webp)) {
  body {
    background-image: url(/path/to/image.png);
  }
}

注意：以上代码仅为示例，实际使用时需要替换URL为实际的图像路径。

以上两种方法均可根据浏览器的支持情况来加载相应的图像格式，从而实现在浏览器允许的情况下为背景加载webp图像而不加载png。