css实现精灵图片加载图片失败

失败提示:
1、控制台报错file not found。
2、资源的images文件夹下找不到加载的图片。

失败可能原因:
1、图片路径错误(最常见):层级关系一定要对。
2、css选择器编写错误(我就是这样,整了好久才发现,真是笨死了)。


精灵图片实现方法

/*HTML代码*/

/*CSS代码*/
.iconset {
	display: inline-block;
	float: right;
	background-image: url("images/coffee.png");
	width: 18px;
	height: 18px;
}
header .icon-list .coffee0 {
	background-position: -24px -48px;
}
header .icon-list .coffee1 {
	background-position: -24px -72px;
}
header .icon-list .coffee2 {
	background-position: -24px -96px;
}
header .icon-list .coffee3 {
	background-position: -24px -120px;
}

实现效果图
图中微博皇冠等级图片为精灵图片。
css实现精灵图片加载图片失败_第1张图片

你可能感兴趣的:(web前端,css)