后备背景图片(如果不存在默认值) [英] 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屋！