013（图片整合）

最新推荐文章于 2024-09-25 15:27:18 发布

啊啊啊啊ly

最新推荐文章于 2024-09-25 15:27:18 发布

阅读量87

点赞数 1

分类专栏：每天一个小知识文章标签： CSSSprites 图片整合 HTTP请求页面加载速度 background-position

本文链接：https://blog.csdn.net/m0_46555090/article/details/121610354

版权

每天一个小知识专栏收录该内容

12 篇文章 0 订阅

订阅专栏

013（图片整合）

图片整合的概念，使用图片整合的优势

CSS Sprites的原理（图片整合技术）css精灵

一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用**background-position**”来实现背景图片的定位技术。

二、图片整合的优势：

1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。

2）通过整合图片来减小图片的体积。

在这里插入图片描述

实现图片整合的方法和技巧

1)使用ps进行小图片整合；

2)使用相关软件来进行操作。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片整合</title>
	<style type=text/css>
		*{
			margin:0;
			padding:0;
		}
		ul{
			width:248px;
			height:22px;
			border:1px solid skyblue;
			margin:50px auto;
			list-style:none;
		}
		ul li{
			float:left;
		}
		ul li a{
			text-decoration:none;
			display:block;
			width:62px;
			height:22px;
			line-height:22px;
			text-align:center;
			font-size:12px;
			color:#666;
			background:url(../images/bg.gif);
		}
		ul .li2 a{
			background-position:-62px 0;
		}
		ul .li3 a{
			background-position:-124px 0;	
		}
		ul .li4 a{
			background-position:-186px 0;
		}
		ul .li1 a:hover{
			background-position: 0 -22px;	
		}
		ul .li2 a:hover{
			background-position: -62px -22px;	
		}
		ul .li3 a:hover{
			background-position: -124px -22px;
		}
		ul .li4 a:hover{
			background-position: -186px -22px;
		}
	</style>
</head>
<body>
	<ul>
		<li class=li1><a href="">首页</a></li>
		<li class=li2><a href="">新闻</a></li>
		<li class=li3><a href="">娱乐</a></li>
		<li class=li4><a href="">体育</a></li>
	</ul>
</body>
</html>

在这里插入图片描述