如果默认不存在,后备背景图像

Question

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

如果默认背景不存在,是否有任何非JavaScript方法可以创建备用图像的后备？

body{
    background: url(bg.png);
    background-size: 100% 100%;
    width: 100vw;
    height: 100vh;
    margin: 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>

Answer 2

要指定多个可能的背景,您可以:

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

这将设置背景,bg.png如果它存在.如果它不存在,则将其设置为bg.jpg.如果这些图像都不存在,则背景将设置为静态green颜色.

请注意,它将优先考虑首先指定的任何图像.因此,如果两个图像都存在,它将选择bg.png超过bg.jpg.

在这里查看演示.通过破坏任何图像网址来测试它.