如果默认值不存在，则回退背景图像 [英] Fallback background-image if default doesn't exist

问题描述

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

I want to set an image as a background, however the image name might be either bg.png or bg.jpg.

如果默认背景不存在，是否有任何非 JavaScript 方法可以创建备用图像的回退?

Is there any non-javascript way to create a fallback to an alternative image if the default background doesn't exist?

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

推荐答案

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

You can use multiple backgrounds if there is no transparency involved and they occupy all available space or have the same size:

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>

如果第一个没有退出，则会显示第二个.

If the first doesn't exit, the second will be displayed.

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>

这篇关于如果默认值不存在，则回退背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！