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