使用CSS背景图像预加载图片？

Question

有一种简单而广为人知的预加载图片的方法，就是使用在视口外部固定位置的div来存放一些图片。

如果只是在CSS中使用background属性并将多个图片应用于没有内容的div，是否实际上是相同的呢？

像这样：

<div id="preload"></div>

#preload {
    position: absolute;
    overflow: hidden;
    left: -9999px; 
    top: -9999px;
    height: 1px;
    width: 1px;
    background: transparent url("../images/misc/formLoader.gif") no-repeat center center;
    background: transparent url("../images/misc/selectLoader.gif") no-repeat center center;
    background: transparent url("../images/misc/projectLoader.gif") no-repeat center center;
}

这样真的可行吗？还是最后一个背景属性会覆盖其他声明？

在CSS3中，是否可以使用多个背景？

- matt

Answer 1

当你像这样用逗号分隔多个背景图片时： background-image: url(../images/misc/formLoader.gif), url(../images/misc/selectLoader.gif), url(../images/misc/projectLoader.gif); 它应该可以工作。我不知道是否适用于`background:`。你可以试一下。

- Display Name

Answer 2

您可以使用CSS3将多个背景添加到一个元素中。 http://www.css3.info/preview/multiple-backgrounds/

---

如果您希望它在ie中也能正常工作...您应该使用<img>方式。

---

另外一种好的方法是将多个图像放在单个图像文档中，并将其应用为背景图像以分离元素，并使用background-position: -20px 0px;来定义该特定图像所在的位置。这使得此文档中的所有这些图像在同一时间加载，因为它们在同一文档中。

使用这种方式，您只需要加载一个<img>或background，就可以加载多个图像。

- Joonas

Answer 3

这对我来说非常有效，可以在Chrome和IE中预加载图像并在悬停时交换它们。 "preload" div没有高度/宽度，因为图像设置为背景，所以不会显示在页面上，并且当您想要在悬停时交换它们时，图像已经准备好了。（您显然必须在锚点上设置高度/宽度。我只是展示最小的CSS来传达重点）

HTML：

<div id="preload"></div>
<div id="icons">
    <a href="http://..." class="social-button-1"></a>
    <a href="http://..." class="social-button-2"></a>
    <a href="http://..." class="social-button-3"></a>
</div>

CSS：

#preload {background: url('images/pic1b.png'), url('images/pic2b.png'), url('images/pic3b.png');}
.social-button-1 {background: url('images/pic1a.png');}
.social-button-2 {background: url('images/pic2a.png');}
.social-button-3 {background: url('images/pic3a.png');}
.social-button-1:hover {background: url('images/pic1b.png');}
.social-button-2:hover {background: url('images/pic2b.png');}
.social-button-3:hover {background: url('images/pic3b.png');}

- gtr1971