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

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

本文关键字：背景 许背景 颜色 缩放 定时间 完美      更新时间：2023-09-26

总的来说，我是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;
    }

这似乎做得很好！但我的问题来自更具体的事情：我希望图像稍后显示，并且没有背景图像可以开始 - 只有背景颜色。我还使用代码在更改为图像之前经常更改背景颜色。问题是我一辈子都不知道如何更改样式以使用背景颜色或更改背景图像集设置以使用 html 样式。我尝试的所有方法都导致空白屏幕或输入/计时不正确。

我的"设置图像"代码，这是我在尝试这个新代码之前使用的，它只设置了填充宽度：

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

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

您可以同时将背景"颜色"和"图像"应用于任何元素，只需在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 小提琴，演示了上述内容。 https://jsfiddle.net/u5x87q6y/1/

相关文章：