我开发了一个主题，它有一个称为项目的自定义帖子类型。在单个项目页面上，有一个具有高质量滚动背景图像的视差样式部分。我正在使用一个自定义字段（通过ACF插件）将此背景图像添加到项目页面，并且此自定义字段被编码到单个项目模板文件中。这意味着我的所有项目页面只需要一个模板。

这个背景图像质量很高，因此是一个相当大的图像文件（对我来说保持图像质量很重要）。我想将WebP图像作为背景图像添加到此视差部分。但我当然需要为不支持WebP图像格式的浏览器提供后备支持。我看过很多关于如何为通过<img> 标记，或通过CSS文件中的“背景图像”属性。但我还没有看到一篇文章提到如何通过style属性为背景图像输出提供回退。

我无法通过CSS文件或CSS类输出背景图像，因为ACF只需要在PHP文件中使用，所以自定义字段需要直接在模板文件中编码（在必要的<div>)

总之，如何为通过style属性输出的图像提供WebP图像格式的回退？如何为内联背景图像CSS提供回退？

代码示例：

<section class="parallaxSection parallaxWide">          
    <div class="parallaxWide--wrap">
        <div class="parallaxWide--elementWrap">
            <div class="parallaxWide--element" style="background-image:url(<?php if( get_field(\'parallax_bgimage\' )) { the_field(\'parallax_bgimage\'); } ?>);">
            </div>
        </div>
    </div>
</section>