如何获得背景图像CSS在Safari和Internet Explorer上工作？

Question

我为一对即将结婚的夫妇创建了一个简单的网站，我使用了引导程序，并且一切正常。但是，2x的图像（.webp）不能在Internet Explorer或Safari上加载，它在Chrome上可以完美运行。

下面的CCS：

#home {
background: url(/Images/background_two.webp) center center no-repeat;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#fixed {
background: url(/Images/background_four.webp) center center no-repeat;
display: table;
height: 70%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

以下HTML：

<div id="home">
    <div class="landing-text">
        <h1>Juanita & Markus</h1>
        <h3>ARE GETTING MARRIED</h3>
        <a href="#our_story_one" class="btn btn-light btn-lg">Our Story</a>
    </div>      
</div>


<!-- Fixed Image -->

<div id="fixed">
    <br>
    <div class="container count-down">
        <div class="jumbotron container">
           <h1><b>We are getting married in...<b></h1><br>
           <h3 id="demo"></h3>
        </div>
    </div>
</div>

我尝试通过更改CSS选项的顺序来尝试各种形式的几种方法，但是没有运气。

它必须与后台CSS相关，因为Jpeg会完美加载。

网站链接：https://skrikkeljaartroue.co.za/

Answer 1

主要问题是图像的扩展，Safari和IE中不支持webp。看到这里：caniuse.com/#feat=webp尝试其他图像扩展名，例如jpg或png等。