雪碧图

最新推荐文章于 2021-06-28 15:07:55 发布

宋莹慧

最新推荐文章于 2021-06-28 15:07:55 发布

阅读量188

点赞数

分类专栏： Web前端编程

本文链接：https://blog.csdn.net/qq_44404435/article/details/115678139

版权

Web前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

编程

11 篇文章 0 订阅

订阅专栏

雪碧图

为了性能考虑把多张有关联的小图片放在一张大图里，这样加载项目时候加载的图片就变少了，通过调整背景图片位置来展示不同的小图

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>雪碧图</title>
	<style type="text/css">
		div{
			width: 55px;
			height: 11px;
			background-image: url(img/2.png);
			/* 背景图片重复 默认重复 no-repeat不重复 */
			background-repeat: no-repeat;
			background-position: 0px -33px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

将
在这里插入图片描述
在网页中显示为

宋莹慧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
雪碧图

雪碧图为了性能考虑把多张有关联的小图片放在一张大图里，这样加载项目时候加载的图片就变少了，通过调整背景图片位置来展示不同的小图<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>雪碧图</title> <style type="text/css"> div{ width: 55px; height: 11px; backgro
复制链接

扫一扫