精灵图/九宫格使用教程

最新推荐文章于 2022-09-18 23:12:16 发布

过分优秀

最新推荐文章于 2022-09-18 23:12:16 发布

阅读量332

点赞数

分类专栏： web网页界面设计文章标签： html5 css 前端

本文链接：https://blog.csdn.net/A485320/article/details/119375618

版权

web网页界面设计专栏收录该内容

3 篇文章 2 订阅

订阅专栏

本质：

CSS精灵图是一种处理网页背景图像的方式，它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来

精灵图的使用：
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、
background-repeat
background-position属性进行背景定位，
其中最关键的是使用background-position 属性精确地定位

效果如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.main {
				height: 606px;
				width: 606px;
				border: 1px solid cyan;
				margin: 50px auto;
			}

			.main div {
				height: 200px;
				width: 200px;
				border: 1px solid black;
				float: left;
				background-image: url(img/bg.jpg);
				background-repeat: no-repeat;
			}
			.main div:hover{
				-webkit-transform: scale(0.9);
				-ms-transform: scale(0.9);
				transform: scale(0.9);
			}
			
			.item1{
				background-position: 50px 50px;
			}

			.item2 {
				background-position: -152px 50px;
			}
			.item3{
				background-position: -354px 50px;
			}
			
			.item4{
				background-position: 50px -152px;
			}
			.item5{
				background-position: -152px -152px;
			}
			.item6{
				background-position: -354px -152px;
			}
			
			.item7{
				background-position: 50px -354px;
			}
			.item8{
				background-position: -152px -354px;
			}
			.item9{
				background-position: -354px -354px;
			}
			
		</style>
	</head>
	<body>
		<div class="main">
			<div class="item1"></div>
			<div class="item2"></div>
			<div class="item3"></div>
			<div class="item4"></div>
			<div class="item5"></div>
			<div class="item6"></div>
			<div class="item7"></div>
			<div class="item8"></div>
			<div class="item9"></div>

		</div>

	</body>
</html>

过分优秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精灵图/九宫格使用教程

本质：CSS精灵图是一种处理网页背景图像的方式，它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来精灵图的使用：CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeatbackground-posi
复制链接

扫一扫

专栏目录