Question

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

如果默认背景不存在，是否有任何非JavaScript方式可以创建替代图像的后备？

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

Answer 1

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 2

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

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

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

请注意，它会优先处理首先指定的图像。因此，如果两个图像都存在，它将在bg.png上选择bg.jpg。

查看demo here。通过破坏任何图像网址来测试它。

Answer 3

尽管此解决方案确实涉及JS，但它将使用CSS下载第一个图像，并且如果主图像下载失败，将仅使用JS下载后备图像。

首先，像往常一样使用CSS设置主图像，例如：

.myImage {
    background-image = "main-image.png";
}

并添加以下仅在加载主映像失败时才起作用的JS（否则，将永远不会下载后备映像）。

var img = document.createElement("img");
img.onerror = function() {
    var style = document.createElement('style');
    style.innerHTML = '.myImage { background-image = url("http://fallback_image.png"); }';
    document.head.appendChild(style);
}
img.src = "main_image.png";

请注意，您可以向使用javascript添加的CSS块中添加多个规则，例如，如果您需要对多个元素执行此操作。

Answer 4

我想要一个不会两次加载图像的解决方案。例如，如果CDN同时也总是加载原始图像，则它的后备性能不是很好。所以我最终写了一个Javascript来操纵加载的CSS DOM。

var cdn = "https://mycdn.net/"; // Original location or thing to find
var localImageToCssPath = "../"; // Replacement, Css are in /css/ folder.

function replaceStyleRule(allRules){
  var rulesCount = allRules.length;

  for (var i=0; i < rulesCount; i++) 
  {
    if(allRules[i].style !== undefined && allRules[i].style !== null &&
        allRules[i].style.backgroundImage !== undefined &&
        allRules[i].style.backgroundImage !== null &&
        allRules[i].style.backgroundImage !== "" &&
        allRules[i].style.backgroundImage !== "none" &&
        allRules[i].style.backgroundImage.indexOf(cdn) > -1
            )
      {
        var tmp = allRules[i].style.backgroundImage.replace(cdn, localImageToCssPath);
        //console.log(tmp);
        allRules[i].style.backgroundImage = tmp;
      }
      if(allRules[i].cssRules !== undefined && allRules[i].cssRules !== null){
        replaceStyleRule(allRules[i].cssRules);
      }

  }
}
function fixBgImages(){
  var allSheets = document.styleSheets;
  if(allSheets===undefined || allSheets===null){
    return;
  }
  var sheetsCount = allSheets.length;
  for (var j=0; j < sheetsCount; j++) 
  {
    var allRules = null;
    try{
        allRules = allSheets[j].cssRules;
    } catch(e){
        // Access can be denied
    }
    if(allRules!==undefined && allRules!==null){
        replaceStyleRule(allRules);
    }
  }
}

// use fixBgImages() in e.g. onError

Answer 5

您可以使用CSS生成背景图片，并在隐藏的图片标签和onError中使用相同的图片网址，更改图片网址并使其显示

<div
  style={{ backgroundImage: `url(${imageSrc})` }}
>
  <img
    style={{ display: "none" }}
    src={imageSrc}
    onError={(e) => {
      e.currentTarget.src = brokenImageFallbackUrl;
      e.currentTarget.style.display = "block";
      // or keep this image hidden and set the backgroundImage of the parent div
    }}
  />
</div>

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

5 个答案: