Question

有一种简单的着名方法可以在视口外部固定一个div来预加载图像，这些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可以使用多个背景吗？

Answer 1

当您用逗号分隔背景图片时，如下所示： background-image: url(../images/misc/formLoader.gif), url(../images/misc/selectLoader.gif), url(../images/misc/projectLoader.gif); 它应该工作。我不知道，如果它适用于`background：'。试试吧。

Answer 2

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

如果你想让它在ie中工作......你想以<img>的方式去做。

另一个好方法是将多个图像放在单个图像文档中，并将其作为背景图像应用于单独的元素，并使用background-position: -20px 0px;来定义一个特定图像所在的位置。这使得本文档中的所有这些图像的加载时间与它们在同一文档中的完全相同。

使用这种方式，您只需加载一个<img>或background，然后加载多个图片。

Answer 3

这对我来说非常适合我在Chrome和IE中预加载图像并在悬停时交换它们。 “预加载”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');}

使用css背景图像预加载图像？

3 个答案: