《HTML+CSS》視訊14 雪碧圖

Han_python發表於2020-12-26
HTMLCSS

CSS-Sprite

在設定按鈕的時候，可以給超連結設定偽類，然後分別給不同的偽類設定三個稍有差別的圖片，實現點選按鈕的互動動作。

但是因為瀏覽器只有在使用到某個圖片的時候才會載入圖片，所以在hover和active的時候，會有白色的背景閃爍，使用者體驗差。

為了解決上述問題，可以將三張圖片整合到一張圖片中，使用background-position來改變背景圖片的顯示部分，實現互動效果。這樣減少了圖片的總大小，並且解決了載入偽類圖片的時候會閃爍的問題，這種整合圖片就叫做CSS-Sprite，雪碧圖。

<!DOCTYPE html>
<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>

在這裡插入圖片描述

相關文章