CSS雪碧图Sprite

最新推荐文章于 2022-08-11 17:18:21 发布

Bear

最新推荐文章于 2022-08-11 17:18:21 发布

阅读量327

点赞数

分类专栏： HTML与CSS 文章标签： css 雪碧图

本文链接：https://blog.csdn.net/bear_huangzhen/article/details/100812349

版权

HTML与CSS 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

原理：

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。

优点：

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

2. 提高页面的加载速度

示例1（按钮特效）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css按钮特效</title>
		<style type="text/css">
			
			/*正常情况*/
			.btn:link{
				display: inline-block;
				width: 93px;
				height: 29px;
				background: url(img/btn2.png);
				background-position: 0px 0px;
			}
			
			/*鼠标移入*/
			.btn:hover{
				background-position: -93px 0px;
			}
			
			/*鼠标点击*/
			.btn:active{
				background-position: -186px 0px;
			}
			
		</style>
	</head>
	<body>
		<a href="#" class="btn"></a>
	</body>
</html>

示例2（淘宝开店按钮）:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登陆注册模块</title>
<style type="text/css">
	.itcast{
		width:300px;
		height:50px;
		margin:20px auto;
	}
	a{
		width:105px;
		height:50px;    
		display:block;                              /*将超链接转换为块元素*/                
		float:left;                                 /*超链接左浮动*/ 
		background:url(img/login.jpg);
	}
	.login{
		width:92px;
		background-position:-105px 0;
	}    
	.open{
		width:103px;
		background-position:-197px 0;
	}    
	.register:hover{background-position:0 -50px;}
	.login:hover{
		width:94px;
	    background-position:-103px -50px; 
		margin-left:-2px;
	}
	.open:hover{
		width:105px;
	    background-position:-195px -50px;
		margin-left:-2px;
	}
</style>
</head>
<body>
<div class="itcast">
	<a href="#" class="register"></a>
    <a href="#" class="login"></a>
    <a href="#" class="open"></a>
</div>
</body>

</html>

示例3（淘宝左侧类别导航）:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css雪碧图</title>
		<style type="text/css">
			
			h3{
				margin: 0px;
				padding: 0px;
				font-size: 14px;
				font-weight: 400;
			}
			
			#cat{
				width: 150px;
				background-color: #f8f8f8;
				border: 1px solid #bbb;
			}
			
			ul{
				list-style: none;
				margin: 0px;
				padding: 0px;
			}
			
			ul li{
				display: block;
				height: 31px;
				line-height: 31px;
				border-bottom: 1px solid #dedede;
			}
			
			ul li i{
				background: url(img/sidebar.png);
				display: inline-block;
				width: 30px;
				height: 24px;
				float: left;
				margin: 5px 10px 0px 5px;
			}
			
			#cat_1 i{
				background-position: 0px 0px;
			}
			
			#cat_2 i{
				background-position: 0px -24px;
			}
			
			#cat_3 i{
				background-position: 0px -48px;
			}
			
			#cat_4 i{
				background-position: 0px -72px;
			}
			
			#cat_5 i{
				background-position: 0px -96px;
			}
			
			#cat_6 i{
				background-position: 0px -120px;
			}
			
			#cat_7 i{
				background-position: 0px -144px;
			}
			
			#cat_8 i{
				background-position: 0px -168px;
			}
		</style>
	</head>
	<body>
		<div id="cat">
			<ul>
				<li id="cat_1">
					<i></i>
					<h3>服装内衣</h3>
				</li>
				<li id="cat_2">
					<i></i>
					<h3>鞋包服饰</h3>
				</li>
				<li id="cat_3">
					<i></i>
					<h3>运动户外</h3>
				</li>
				<li id="cat_4">
					<i></i>
					<h3>珠宝手表</h3>
				</li>
				<li id="cat_5">
					<i></i>
					<h3>手机数码</h3>
				</li>
				<li id="cat_6">
					<i></i>
					<h3>办公电脑</h3>
				</li>
				<li id="cat_7">
					<i></i>
					<h3>护肤彩妆</h3>
				</li>
				<li id="cat_8">
					<i></i>
					<h3>母婴用品</h3>
				</li>
			</ul>
		</div>
	</body>
</html>