CSS Sprites的简单实例

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zheng_pika/article/details/79687275

为了提高页面的性能,了解了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的一个简单实例,实际上应用非常广泛!!!


展开阅读全文

没有更多推荐了,返回首页