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

Question

总的来说，我是 Webdev 的新手，在自学过程中进展顺利，直到我遇到了一个我一直遇到的问题。

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

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 样式。我尝试过的所有操作都导致了空白屏幕或错误 input/timing.

我的 "set image" 代码，这是我在尝试这个新代码之前使用的代码，它只在设置要填充的宽度时起作用：

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

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

Answer 1

您可以同时对任何元素应用背景 'color' 和 'image'，只需在您的 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/

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

Perfectly scaling background that only appears after a certain time and allows background colour beforehand

javascript

css

background-image