css零到一中级教程019：CSS 图像精灵

最新推荐文章于 2024-04-05 00:15:24 发布

慕容屠苏

最新推荐文章于 2024-04-05 00:15:24 发布

阅读量116

点赞数

分类专栏： css零到一文章标签： css html 前端

本文链接：https://blog.csdn.net/kerryqpw/article/details/123706321

版权

css零到一专栏收录该内容

98 篇文章 2 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

图像精灵

图像精灵是单个图像中包含的图像集合。

包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

使用图像精灵将减少服务器请求的数量并节约带宽。

图像精灵 - 简单的例子

我们使用以下单幅图像（"navsprites.gif"）而不是使用三幅单独的图像：

通过使用 CSS，我们可以仅显示所需图像的某个部分。

在下面的例子中，CSS 指定了显示 "navsprites.gif" 图像的哪部分：

实例

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(/i/css/navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(/i/css/navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="/i/css/trans.gif" width="1" height="1">
<img id="next" src="/i/css/trans.gif" width=

了解本专栏

超级会员免费看

慕容屠苏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css零到一中级教程019：CSS 图像精灵

图像精灵图像精灵是单个图像中包含的图像集合。包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。使用图像精灵将减少服务器请求的数量并节约带宽。图像精灵 - 简单的例子我们使用以下单幅图像（"navsprites.gif"）而不是使用三幅单独的图像：通过使用 CSS，我们可以仅显示所需图像的某个部分。在下面的例子中，CSS 指定了显示 "navsprites.gif" 图像的哪部分：实例<!DOCTYPE html><ht
复制链接

扫一扫