Question

我有一个div的背景图片。

在加载背景图片之前，我需要背景为白色以外的其他颜色。

我无法在容器div上使用背景颜色，因为我的背景图片具有透明度，我想在下面看到页面内容。

有没有办法让背景颜色立即加载，然后加载背景图片时使用？我知道我可以用JS做到这一点但是有没有我可以使用css / html的回退方法？

Answer 1

如果您出于某种原因绝对反对Javascript，您可以创建模仿使用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; }
}

这是做什么的：

在图片上方添加一个带有所需背景的块元素。
在一段时间之后淡化该背景（您必须找到适合您内容的适当数量）。
让背景在无限时间内消失。

你可能已经注意到的这方面的缺点是你无法预测确切的时间。对于一些人来说，图像会加载，对于其他人来说，它可能会有一点点加载。

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

此外，可以在动画中添加delay，仅在一段时间后启动它。

Answer 2

您可以简单地堆叠两个CSS规则。

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

将显示背景颜色，直到图像加载完毕。

使用background-color直到加载background-image

2 个答案: