Question

我正在使用此代码导入背景图像，但我无法使图像适合屏幕大小，并且它看起来比屏幕大有什么帮助吗？

 $(switchBackground);
    var oFReader = new FileReader(),
        rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

    oFReader.onload = function(oFREvent) {
        localStorage.setItem('b', oFREvent.target.result);
        switchBackground();
    };

    function switchBackground() {
      $('body').css('background-image', "url(" + localStorage.getItem('b') + ')');    
    }

    function loadImageFile(testEl) {
      if (! testEl.files.length) { return; }
      var oFile = testEl.files[0];
      if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
      oFReader.readAsDataURL(oFile);
    }

<input id="test" type="file" onchange="loadImageFile(this)" />

demo

Answer 1

尝试将此添加到您的css或通过js，就像您现在所做的那样......

body {
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Updated demo

Answer 2

这对我有用=]

  function switchBackground() {
  $('body').css('background-image', "url(" + localStorage.getItem('b') + ')'),
  $('body').css('background-size', '100%'),
  $('body').css('background-repeat','no-repeat');    
}

使用css的背景图像大小

2 个答案: