CSS学习笔记一

最新推荐文章于 2024-08-17 22:24:13 发布

LKFOOD

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量116

点赞数

分类专栏： CSS学习文章标签： css 雪碧图初级

本文链接：https://blog.csdn.net/LKFOOD/article/details/88850259

版权

CSS学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS-Sprite 雪碧图

所谓雪碧图其实就是把一些小图片或者图标集中放在一张图片上，真实项目中主要功能就是可以减少http请求
准备工作：
在这里插入图片描述

代码：简单实现原理

<!DOCTYPE html>
<html>
<head>
	<title>sprite</title>
	<style type="text/css">
		.parent{
			width: 25px;
			height: 20px;
			border: solid 2px red;
			background: url(./sprite.png);
			background-repeat: no-repeat;
		}
		.parent:hover{
			background-position: 0 -50px;
		}

		.copy{
			margin-top: 100px;	
			width: 100px;
			height: 100px;
			background: url(./2016.png);
		}

	</style>
</head>
<body>
<div class="parent">
</div>
<div class="copy"></div>
</body>
</html>

实现效果：
parent区域正常展示第一个图标，当鼠标hover时，利用background-position属性，来移动背景图片位置，实现图标切换

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LKFOOD

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记一

CSS-Sprite 雪碧图所谓雪碧图其实就是把一些小图片或者图标集中放在一张图片上，真实项目中主要功能就是可以减少http请求准备工作：代码：简单实现原理<!DOCTYPE html><html><head> <title>sprite</title> <style type="text/css"> ...
复制链接

扫一扫