Html 使用背景色直到加载背景图像

我有一个div的背景图像

我需要的背景是一个不同的颜色，而不是白色，直到背景图像加载

我不能在容器div上使用背景色，因为我的背景图像是透明的，我希望看到下面的页面内容

---

有没有一种方法可以让背景颜色立即加载，然后在加载背景图像时使用它？我知道我可以用JS来做，但是有没有什么回退方法可以用在css/html上呢？

你可以简单地堆叠这两个css规则

background-color: #000;
background-image: url("...");

---

背景色将一直显示，直到图像加载。

如果出于任何原因您完全反对Javascript，您可以创建一种效果，该效果模仿您使用Javascript将获得的效果

它的作用是：

• 在图像上方添加具有所需背景的块元素
• 在短时间内淡出背景（你必须找到适合你的内容的合适数量）
• 让背景随着无限的时间而褪色

你可能已经注意到，问题的另一面是你无法预测准确的时间。对于一些人来说，图像将被加载，而对于其他人来说，在加载之前，图像可能仍然有一点点

您还可以根据浏览器的不同调整淡出时间。例如，如果有人使用IE8访问网站，您可以添加更高的淡出时间

---

另外，可以在动画中添加一个

延迟

，以便在一段时间后才开始。

这个问题不需要代码。这种功能是否严重到需要一个纯CSS解决方案？这可以被认为是一项高级功能，因此如果客户端没有启用脚本，这并不重要。为什么不使用一些图像预加载程序呢？对于纯CSS，唯一类似于这一点的是使用无限CSS动画作为背景色。但这是一种有漏洞的方法，在较旧的浏览器上不起作用。@Andrei问题是，根据网络速度、服务器在加载时的响应。。。所以我确信我们不能为这种动态样式提供任何纯CSS解决方案。问题是背景图像有一些透明的背景，所以在加载后，背景颜色仍然通过背景图像的透明背景显示，这不是OP想要的。@SureshPonnukalai在这种情况下，一个纯粹的CSS解决方案是不可取的。您可以使用javascript轻松实现这一点。

div {
    background : url(http://www.st.hirosaki-u.ac.jp/~shimpei/GPS/GPSCMC/images/sphere-transparent.png);
    width:500px;
    height:500px;
    position:relative;
}

.container:before{
    width:500px;
    height:500px;
    position:absolute;
    left:0;
    top:0;
    content:"";
    background:#333;
    -webkit-animation: fade-out 99999s 1 linear; /* Safari 4+ */
    -moz-animation:    fade-out 99999s 1 linear; /* Fx 5+ */
    -o-animation:      fade-out 99999s 1 linear; /* Opera 12+ */
    animation:         fade-out 99999s 1 linear; /* IE 10+ */
}

@-webkit-keyframes fade-out {
  0%   { opacity: 1; }
  0.002% { opacity: 0; }
  100% { opacity: 0; }
}
@-moz-keyframes fade-out {
  0%   { opacity: 1; }
  0.002% { opacity: 0; }
  100% { opacity: 0; }
}
@-o-keyframes fade-out {
  0%   { opacity: 1; }
  0.002% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fade-out {
  0%   { opacity: 1; }
  0.002% { opacity: 0; }
  100% { opacity: 0; }
}