CSS Sprites的简单实例

最新推荐文章于 2024-04-29 13:34:43 发布

皮卡洛

最新推荐文章于 2024-04-29 13:34:43 发布

阅读量418

点赞数 1

分类专栏：前端学习拓展文章标签： CSS Sprites 性能优化 css html

本文链接：https://blog.csdn.net/zheng_pika/article/details/79687275

版权

前端学习同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

拓展

3 篇文章 0 订阅

订阅专栏

为了提高页面的性能，了解了CSS Sprites；

所谓CSS Sprites实际上就是对一张图片的重复使用，而这张图片中包含了许多的小图片，我们通过background-image印日大图，利用background-position进行定位，选出该图片中你所需要的那一部分，再将其放在你所想放在的地方；

这么做可以减少网页的http请求以及图片的字节数；从而提高页面的性能；

核心为：

.pic1,.pic2,.pic3,.pic4{background: url(https://img-blog.csdn.net/20160105223630762);}
.pic1{background-position: 0px 0px;}
.pic2{background-position: -25px 0px;}
.pic3{background-position: 0px -25px;}
.pic4{background-position: -25px -25px;}

对于background-position的定位规则，我们可以查看W3C文档，实际上，左上就是（0px 0px），第一个值是水平方向，第二个值是垂直方向；那么可知，右上就是（-apx 0px），其中a就是右上这个小图片离大图左侧的距离；以此类推；

实例代码（实现一个响应式的导航栏）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no">
<script src="jquery-1.8.2.min.js"></script> 
	<title>CSS Sprites简单实例</title>
	<style type="text/css">
*{
	margin:0px;
	padding: 0px;
}
ul{
	list-style: none;
}
li{
	display: block;
	width: 25%;
	height: 50px;
	float: left;
	line-height: 50px;
	text-align: center;
	background-color: #ddd;
}
li:hover{
	background-color: #eef; 
}
li::after{
	content: '';
	display: block;
	clear: both;
}
i{
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -13px;
	display: block;
	width: 25px;
	height: 25px;
	border: 1px solid white;
	border-radius: 50%;
	cursor: pointer;
}
.pic1,.pic2,.pic3,.pic4{background: url(https://img-blog.csdn.net/20160105223630762);}
.pic1{background-position: 0px 0px;}
.pic2{background-position: -25px 0px;}
.pic3{background-position: 0px -25px;}
.pic4{background-position: -25px -25px;}
span{
	display: block;
	width: 100%;
	height: 20px;
	line-height: 20px;
}

@media only screen and (max-width: 600px){
	li{
		width: 100%;
		height: 50px;
	}
}

	</style>
</head>
<body>
<div>
<ul>
	<li>
		<i class="pic1"></i>
		<span>house1</span>
	</li>
	<li>
		<i class="pic2"></i>
		<span>house2</span>
	</li>
	<li>
		<i class="pic3"></i>
		<span>house3</span>
	</li>
	<li>
		<i class="pic4"></i>
		<span>house4</span>
	</li>
</ul>
</div>
</body>
</html>

效果图如下所示：

还是用了一个媒体查询，CSS3的属性，即在屏幕宽度小于600px是，导航栏的每一项宽度变为100%；

如图：

以上就是CSS Sprites的一个简单实例，实际上应用非常广泛！！！

皮卡洛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS Sprites的简单实例

为了提高页面的性能，了解了CSS Sprites；所谓CSS Sprites实际上就是对一张图片的重复使用，而这张图片中包含了许多的小图片，我们通过background-image印日大图，利用background-position进行定位，选出该图片中你所需要的那一部分，再将其放在你所想放在的地方；这么做可以减少网页的http请求以及图片的字节数；从而提高页面的性能；核心为：.pic1,.pic...
复制链接

扫一扫

专栏目录