web-dev-qa-db-ja.com

デフォルトが存在しない場合のフォールバック背景画像

画像を背景として設定したいのですが、画像名はbg.pngまたはbg.jpg。

デフォルトの背景が存在しない場合、代替画像へのフォールバックを作成する非javascriptの方法はありますか？

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

透明度が含まれておらず、使用可能なすべてのスペースを占めるか、同じサイズの場合、複数の背景を使用できます。

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>

最初が終了しない場合、2番目が表示されます。

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>
43
blonfu

複数の可能な背景を指定するには、次のようにします。

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

これにより、背景が存在する場合、bg.pngに設定されます。存在しない場合は、bg.jpgに設定されます。これらの画像が存在しない場合、背景は静的なgreen色に設定されます。

最初に指定された画像に優先順位を付けることに注意してください。したがって、両方の画像が存在する場合、bg.pngよりもbg.jpgを選択します。

demo here をご覧ください。画像のURLを壊してテストします。

8
Chris

画像を2回ロードしないソリューションが必要でした。たとえば、フォールバックを使用したCDNは、常に元の画像もロードする場合、あまり良くありません。そのため、ロードされたCSS DOMを操作するJavascriptを作成することになりました。

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
0
Tuomas Hietanen