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

Question

我为一对即将结婚的夫妇创建了一个简单的网站，我已经使用 bootstrap 并且一切正常。然而，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 加载完美。

网站 link：https://skrikkeljaartroue.co.za/

Answer 1

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

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

How to get background Image CSS to work on Safari and Internet Explorer?

html

css

safari

internet-explorer-11