Bootstrap 4.5 :: 如何让 webp 作为背景图片和图片上的文字

如何解决Bootstrap 4.5 :: 如何让 webp 作为背景图片和图片上的文字

我使用 bootstrap 4.5，我在屏幕上有一个全屏横幅作为背景图片，图片上有主标题。背景图片是jpg格式，想改成webp。我试图实现图片元素，但无法达到相同的结果：webp 作为背景和图片上的文字。文字总是在图片上方或下方，但不会出现在图片上。

初始代码如下，我想将其转换为带有 jpg 回退选项的 webp 背景。我应该在哪里或如何使用图片元素的哪些属性？结果应如下所示：https://keserubarna.hu/vedjegy.html

    <div class="banner-container" style="background: transparent url(/pics/banner_védjegy.jpg) no-repeat center center">
            <article class="banner container">
                <h1 class="page-banner-h1">VÉDJEGY</h1>
            </article>
        </div>