《HTML+CSS》视频14 雪碧图

CSS-Sprite

在设置按钮的时候,可以给超链接设置伪类,然后分别给不同的伪类设置三个稍有差别的图片,实现点击按钮的交互动作。

但是因为浏览器只有在使用到某个图片的时候才会加载图片,所以在hoveractive的时候,会有白色的背景闪烁,用户体验差。

为了解决上述问题,可以将三张图片整合到一张图片中,使用background-position来改变背景图片的显示部分,实现交互效果。这样减少了图片的总大小,并且解决了加载伪类图片的时候会闪烁的问题,这种整合图片就叫做CSS-Sprite雪碧图


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style type="text/css">
			.hyperlink:link{
			display: block;
			width: 12.5rem;
			height: 65px;
			background-image: url(img/css-sprite.png);
			}
			.hyperlink:hover{
			background-position: 0px -65px;
			}
			.hyperlink:active{
			background-position: 0px -130px;
			}
			
		style>
	head>
	<body>
		<a class="hyperlink" href="#">a>
	body>
html>

《HTML+CSS》视频14 雪碧图_第1张图片

你可能感兴趣的:(HTML+CSS,html,css)