CSS_Spirte实现原理

最新推荐文章于 2024-06-29 03:27:39 发布

zhiqiang21

最新推荐文章于 2024-06-29 03:27:39 发布

阅读量1.9k

点赞数

分类专栏： HTML+CSS 从0到1学Web前端文章标签： WEB前端 CSS-sprite

本文链接：https://blog.csdn.net/yisuowushinian/article/details/45345407

版权

HTML+CSS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

从0到1学Web前端

11 篇文章 12 订阅

订阅专栏

本文介绍了一种用于提高网页加载速度的技术——CSS精灵（CSS Sprite）。通过将多个小图标整合到一张大图片上，并利用CSS背景定位展示不同图标，从而减少HTTP请求次数。文章通过实例演示了如何具体实现这一技术。

摘要由CSDN通过智能技术生成

CSS Spirte就是所谓的把很多的小图标合并成一张大的图片，然后使用CSS的background-position属性，来动态的定位自己需要图标的位置。这样做的目的主要是减少HTTP请求，加快网页的加载速度。

图片

需要的结果：

多余的话就不多说了具体的实现都已经写在了代码中，并且对于重点都进行了注释。如果有问题可以留言哈！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>css_spirte</title>
    <style type="text/css">
    div ul{ margin:0;padding:0;}
    #body_father ul {
    	list-style:none;
    }
	#body_father{
		width:150px;
		background-color:#f8f8f8;
		border: 1px solid #bbb;
	}
	#body_father li{
		/*display:block;li本身就为块级元素*/
		height:31px;
		line-height:31px;
		overflow:hidden;
		border-bottom:1px solid #dedede;
	}

	li i {
		background:url(img/css_spirte.png);
		width:30px;
		height:24px;
		/*display:inline;i标签自身就为行内元素*/
		float:left; 		/*因为h4是块级元素默认会换行，i标签浮动脱离文档流，h4标签占用i标签位置*/
		margin:3px 10px 0 0;
	}
	li h4 {
		font-size:14px;
		font-weight: 400px;
	}

	/*h4为块级元素默认的重置margin,padding*/
	h4{
		margin:0;padding:0;
	}

	/*为每一个i标签设置图片位置的偏移量*/
	.item_li1 i{background-position:0 0;}
	.item_li2 i{background-position:0 -24px;}
	.item_li3 i{background-position:0 -48px;}
	.item_li4 i{background-position:0 -72px;}
	.item_li5 i{background-position:0 -96px;}
	.item_li6 i{background-position:0 -120px;}
	.item_li7 i{background-position:0 -144px;}
	.item_li8 i{background-position:0 -168px;}


.test{
	background-color:#CEE506;
}

    </style>
</head>

<body>
    <div id='body_father'>
        <ul>
            <li class="item_li1"><i>ceshi</i>
                <h4>你是好的1</h4></li>
            <li class="item_li2"><i></i>
                <h4>你是好的2</h4></li>
            <li class="item_li3"><i></i>
                <h4>你是好的3</h4></li>
            <li class="item_li4"><i></i>
                <h4>你是好的4</h4></li>
            <li class="item_li5"><i></i>
                <h4>你是好的5</h4></li>
            <li class="item_li6"><i></i>
                <h4>你是好的6</h4></li>
            <li class="item_li7"><i></i>
                <h4>你是好的7</h4></li>
            <li class="item_li8"><i></i>
                <h4>你是好的8</h4></li>
        </ul>
    </div>
    <div>
    	<i class="test">测试</i><h4>测试h4git</h4>
    </div>
</body>

</html>