精灵图的使用

最新推荐文章于 2022-06-01 16:49:42 发布

A 神

最新推荐文章于 2022-06-01 16:49:42 发布

阅读量188

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42378409/article/details/103684972

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			background:url(images/abcd.jpg) no-repeat ;
		}
		.l{
			float: left;
			width: 108px;
			height: 122px;
			
			background-position: 0px -272px;
		}
		.f{
			float: left;
			width: 97px;
			height: 122px;
			
			background-position: 0px -132px;
		}
		.r{
			float: left;
			width: 133px;
			height: 123px;
			
			background-position: -121px -409px;
		}
	</style>
</head>
<body>
	<div class="l"></div>
	<div class="f"></div>
	<div class="r"></div>
</body>
</html>