如果默认不存在，则回退背景图像

Question

我想将图像设置为背景，但是图像名称可能是 bg.png 或 bg.jpg 。

如果默认背景不存在，是否有任何非 javascript 方法来创建备用图像的回退？

 body{
    background: url(bg.png);
    background-size: 100% 100%;
    width: 100vw;
    height: 100vh;
    margin: 0;
}

原文由 djsony90 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果不涉及透明度并且它们占据所有可用空间或具有相同大小，则可以使用多个背景：

 div{
     background-image: url('http://placehold.it/1000x1000'), url('http://placehold.it/500x500');
     background-repeat:no-repeat;
     background-size: 100%;
     height:200px;
     width:200px;
}

 <div></div>

如果第一个不退出，将显示第二个。

 div{
     background-image: url('http://placehol/1000x1000'), url('http://placehold.it/500x500');
     background-repeat:no-repeat;
     background-size: 100%;
     height:200px;
     width:200px;
}

 <div></div>

原文由 user4994625 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要指定多个可能的背景，您可以这样做：

   background-color: green;
  background-image: url('bg.png'), url('bg.jpg');

这会将背景设置为 bg.png 如果它存在。如果它不存在，它将被设置为 bg.jpg 。如果这些图像都不存在，背景将设置为静态 green 颜色。

请注意，它将优先考虑首先指定的任何图像。因此，如果两个图像都存在，它将在 bg.png 之上显示 bg.jpg 。如果 png 具有任何透明度，则两个图像都将部分可见。

在 此处查看演示。通过破坏任何图像 url 来测试它。

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议