javascript - 完美缩放仅在特定时间后出现的背景，并预先允许背景颜色

Question

总的来说，我是 Webdev 的新手，在自学过程中一切都很顺利，直到我在这个我一直遇到的问题上遇到了轻微的障碍。

对于我网站上的一个页面，我正在使用框架(不是 iframe，只是框架......我意识到它们很糟糕我只是想在这里将它们用于特定目的)并且我想要一个图像完全放大以填充一帧的高度，而不仅仅是在填充宽度时停止。这已经是我见过一些人遇到的问题，并且有一个简单的解决方案，我从 css-tricks 的人员那里 retrofit 到我的代码中。 (我扩展了简写形式以便于我更容易理解):

body { 
      background-image: url('/aboutme/fractal.gif');
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

And that seems to do the trick just fine!但我的问题来自更具体的事情:我希望图像稍后显示，并且没有背景图像开始 - 只是背景颜色。在更改为图像之前，我还经常使用代码更改背景颜色。问题是我一辈子都想不出如何更改样式以使用背景颜色或更改背景图像集设置以使用 html 样式。我尝试过的所有方法都导致了空白屏幕或不正确的输入/时间。

我的“设置图像”代码，这是我在尝试这个新代码之前使用的代码，它只在设置要填充的宽度时起作用:

function toEuphoria() {
   document.body.style.backgroundImage = url('/aboutme/fractal.gif');
}

简而言之:我正在尝试设置一个图像来填满宽度和高度，但它只在稍后出现 - 并且事先出现彩色背景。对不起，如果我不是很清楚，那真的很晚了。任何帮助都将不胜感激!

Answer 1

您可以同时对任何元素应用背景“颜色”和“图像”，只需在您的 javascript 中考虑到这一点即可；

body{
  background:      #2c2d2e url('/aboutme/fractal.gif');
  background-size: cover;
}

function toEuphoria() {
   document.body.style.background = "transparent url('/aboutme/fractal.gif')";
   document.body.style.backgroundSize = 'cover';
}

当您从背景颜色切换到背景图像时，您的背景尺寸将被保留，反之亦然。

编辑

---

具有随机变化背景(颜色、图像、颜色)的 js fiddle 演示了上述内容。 https://jsfiddle.net/u5x87q6y/1/