css精灵图

最新推荐文章于 2024-08-09 11:41:07 发布

z_myHello

最新推荐文章于 2024-08-09 11:41:07 发布

阅读量86

点赞数

分类专栏：学习 css 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/z_myHello/article/details/121627627

版权

学习同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在网页中利用精灵图（sprites）实现图标复用，通过CSS的background-image、background-repeat和background-position属性，展示了一个实例，涉及div元素的尺寸设定、背景图片的定位和鼠标悬停效果。

摘要由CSDN通过智能技术生成

介绍

精灵图就是一张图包含许多小图标。

就是方便缓存使用

怎么用在下面，图是QQ会员页面薅来的。

主要属性

background-image: url();

background-repeat: no-repeat;

background-position: 0px 0px;

用法

就是你想要哪个图标，设一个可以容纳图标的div ，以我的为例：width：100px height:100px

刚好契合图标大小，然后再通过background-position 调整位置

简单的就是

向左水平移动100px 就是 -100px 0px

解释：X轴移动100Y轴不变

<body>
		<div class="a1">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>

<style type="text/css">
	.a1{
		margin: 0 auto;
		width: 600px;
		height: 200px;
				
	    }
			.a1 div{
				width: 100px;
				height: 100px;
				background-color: #FBD74F;
				float: left;
				margin: 50px 0px;
				background: url(../imgs/sprites_footer.png) no-repeat;
				
			}
			.a1 div:nth-child(1){
				background-position: 0px 0px;
				}
			.a1 div:nth-child(1):hover{
				background-position: -100px 0px;
				}
			.a1 div:nth-child(2){
				background-position: 0px -100px;
				}
			.a1 div:nth-child(2):hover{
				background-position: -100px -100px;
				}
			.a1 div:nth-child(3){
				background-position: 0px -200px;
				}
			.a1 div:nth-child(3):hover{
				background-position: -100px -200px;
				}
			.a1 div:nth-child(4){
				background-position: 0px -300px;
				}
			.a1 div:nth-child(4):hover{
				background-position: -100px -300px;
				}
			.a1 div:nth-child(5){
				background-position: 0px -400px;
				}
			.a1 div:nth-child(5):hover{
				background-position: -100px -400px;
				}
			.a1 div:nth-child(6){
				background-position: 0px -500px;
				}
			.a1 div:nth-child(6):hover{
				background-position: -100px -500px;
				}
			
				
		</style>

z_myHello

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css精灵图

介绍精灵图就是一张图包含许多小图标。就是方便缓存使用怎么用在下面，图是QQ会员页面薅来的。主要属性background-image: url();background-repeat: no-repeat;background-position: 0px 0px;用法就是你想要哪个图标，设一个可以容纳图标的div ，以我的为例：width：100px height:100px刚好契合图标大小，然后再通过background-position 调整位置简单的就是向
复制链接

扫一扫

专栏目录