当前位置:  开发笔记 > 前端 > 正文

css和图像精灵

如何解决《css和图像精灵》经验,为你挑选了1个好方法。

我在css中得到了一个关于sprite的快速问题:如果我在css文件中包含两次相同的图像,我会发送两个HTTP请求吗?例如,如果我想从同一图标集图像加载两个不同的按钮:

.btn-1 {
    background:url('img/icons.png') 0 0;
}

.btn-2 {
    background:url('img/icons.png') 0 -60px;
}

还是有另一种方法只包括一次图像?



1> Ólafur Waage..:

浏览器将缓存图像,以便第二次从缓存中获取图像.

但是你想在这样的情况下做的是让CSS完成它的工作.
如果这些按钮是例如.

a {
    background: url('img/icons.png');
}

.btn-1 {
    background-position:0 0;
}

.btn-2 {
    background-position: 0 -60px;
}

推荐阅读
kikokikolove
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有