css 雪碧图的坐标问题,为何我弄完雪碧图后还是这样的

html-css021

css 雪碧图的坐标问题,为何我弄完雪碧图后还是这样的,第1张

可能是权重不够, 被#menu2 li i的权重覆盖掉了, 建议 在 .cat1 前增加 #menu2 提高一下权重,

修改后为, 如果.cat1 是li 的class

那么就修改为 #menu2 .cat1 i{} 如果权重还不够, 那么继续增加权重, 如#menu2 li.cat1 i{}

以上代码为猜测, 因为不知道你的html结构, 所以, 请修改一下, 看看效果, 如果还是这样, 再追问我

回答你问题前先说一下什么是雪碧图?

雪碧图:CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分

在来说一下为什么用雪碧图,有什么优点?

减少加载网页图片时对服务器的请求次数

提高页面的加载速度

减少鼠标滑过的一些bug

结论:雪碧图的优点就是在减少请求次数,如果一个网站有一1000个小图标,你用img,你要请求1000次,这个对网络会有堵塞,还有对用户体验也不够好,如果你有了雪碧图,只要加载一次就可以了,雪碧图的不足就是在于后期的维护。

雪碧图被运用在众多使用了很多小图标的网站上。

相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更好。

一、使用雪碧图的优点有以下几点:

将多张图片合并到一张图片中,可以减小图片的总大小。

将多张图片合并成一张图片后,下载全部所需的资源,只需一次请求。可以减小建立连接的消耗。

二、雪碧图的制作与使用方法:

使用图像编辑软件如Photoshop将多张图放到同一个图层并导出。

使用自动化构建工具自动拼接合并后的图片。

引用图片时,图片地址为合并后的图片地址。