关于CSS Sprite切图技术

最新推荐文章于 2024-05-26 15:41:02 发布

Wilsom

最新推荐文章于 2024-05-26 15:41:02 发布

阅读量1.6w

点赞数 2

分类专栏： CSS 文章标签： css class 工具 google 服务器 div

本文链接：https://blog.csdn.net/lijiacumt/article/details/7193698

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我们经常看到一个页面上有很多小图标，可是当我们用工具去打开时却发现

这些小图标其实在一张图片上，这是怎么实现的呢

这当中用到了CSS Sprites切图技术。

CSS Sprites其实就是把网页中一些图标整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

优点：减少网页http请求，提高页面性能，降低服务器负载；文件命名减少麻烦。

缺点：定位繁琐，布局固定，降低网页弹性。

示例：

<html>
<head>
<meta charset="utf-8">
<title>CSS sprites</title>
<style type="text/css">
div{
	background-image:url(nav_logo99.png);
	background-repeat:no
}
.logo{
	width:120px;
	height:40px;
	background-position:-24px 0px
}
.play{
	width:28px;
	height:28px;
	background-position:-138px -41px
</style>
</head>

<body>
<div class="logo"></div>
<div class="play"></div>
</body>
</html>

效果如下：

这当中，定位比较繁琐，我采用Photoshop来进行定位。

在PS中，右上角选——设计，然后点信息，我们把鼠标放到图片上，便可看到像素的X与Y值，还可以用矩形工具拉出一个矩形，查看它的width与height值。

代码中div的width和height值是你要显示的区域的长和高，background-position：X Y的值就是鼠标放到你要显示的小图标的左上角

的横坐标和纵坐标，特别注意：有负号

另外，还可以通过%比来赋值，如上面的Google图标：

background-position:50% 0%

Wilsom

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
关于CSS Sprite切图技术

我们经常看到一个页面上有很多小图标，可是当我们用工具去打开时却发现这些小图标其实在一张图片上，这是怎么实现的呢这当中用到了CSS Sprites切图技术。CSS Sprites其实就是把网页中一些图标整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，b
复制链接

扫一扫

专栏目录