CSS精灵技术

最新推荐文章于 2024-05-16 17:48:19 发布

佛系小菜鸡

最新推荐文章于 2024-05-16 17:48:19 发布

阅读量275

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_40224261/article/details/104284142

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

精灵技术

css精灵其实是将网页中的一些小背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵页面中不同位置的小图。
在这里插入图片描述
需要用到的css

background-image
background-repeat
background-position属性进行背景定位
其中最关键的就是使用background-position进行精确的定位

为什么需要精灵技术

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。
一个网页中往往需要多个小图片作为修饰，当网页中的图像过多的时候，服务器就会频繁的棘手和发送请求，将大大降低页面的加载速度。

精灵技术使用的核心总结

精确测量，每个背景图片的大小和位置
给盒子指定小背景图片时，背景定位基本都是负值
精灵技术主要针对的是背景图片，那些插入的图片img是不需要这个技术的

案例

背景图片：
在这里插入图片描述
实现效果：拿取字母中的H

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css精灵技术</title>
		<style type="text/css">
			.img{
				width: 81px;
				height: 83px;
				background: url(img/1.jpg) no-repeat -198px -102px;
			}
		</style>
	</head>
	<body>
		<div class="img">
			
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

佛系小菜鸡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS精灵技术

精灵技术css精灵其实是将网页中的一些小背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵页面中不同位置的小图。需要用到的cssbackground-imagebackground-repeatbackground-position属性进行背景定位其中最关键的就是使用background-position进行精确的定位为什么需要精灵技术为了有效减少服务器接收...
复制链接

扫一扫