CSS_超链接状态样式切换&雪碧图

CSS Sprite 技术详解

原创已于 2022-03-07 09:02:34 修改 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

于 2021-03-19 13:29:26 首次发布

css 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何使用 CSS Sprite 技术来优化网页中的图片加载，通过将多个小图片整合到一个大图片中，并利用 background-position 属性显示不同的部分，以此减少 HTTP 请求，提高网页加载速度。

在这里插入图片描述

<style>
/*默认*/
a:link{
	display: block;
	width:93px;
	height: 29px;
	background-image: url(' ./img/08/link .png )
}
/*鼠标移入*/
a: hover{
	background-image: url('./img/08/hover .png )
}
/*点击*/
a:active{
	background-image: url( ./img/08/active. png')
}
/*图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，
浏览器加载外部资源时是按需加载的，用则加载，不用则不加载
像我们上边的练习link会首先加载，而hover和active会在指定状态触发时才会加载
*/
</style>
<a href="javascript:;"></a>

解决图片闪烁

a:link{
	display: block;
	width:93px;
	height: 29px;
	background-image: url(' ./img/08/link .png )
}
a: hover{
	background-position: -93px 0;
}
a:active{
	background-position: -186px 0;
}
/*
解决图片闪烁的问题:
可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示不同位置的图片
这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题
这个技术在网页中应用十分广泛，被称为CSS-Sprite

雪碧图的使用步骤:
1.先确定要使用的图标
2.测量图标的大小
3.根据测量结果创建一个元素
4.将雪碧图设置为元素的背景图片
5.设置一个偏移量以显示正确的图片

雪碧图的特点:
	一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验

*/