前端必知必会-CSS 图片库和图像精灵


CSS 图片库

CSS 可用于创建图片库。

在这里插入图片描述

以下图片库使用 CSS 创建:

示例

<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">在此处添加图片说明</div>
</div>

<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">在此处添加图片说明</div>
</div>

<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">在此处添加图片说明</div>
</div>

<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">在此处添加图片说明</div>
</div>

</body>
</html>

CSS 图像精灵

图像精灵
图像精灵是将多幅图像组合成一幅图像。

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

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

图像精灵 - 简单示例

我们不使用三幅单独的图像,而是使用这幅单幅图像(“img_navsprites.gif”):

在这里插入图片描述

使用 CSS,我们可以只显示我们需要的图像部分。

在以下示例中,CSS 指定要显示“img_navsprites.gif”图像的哪一部分:

示例

#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

示例说明:

<img id="home" src="img_trans.gif"> - 仅定义一个小的透明图像,因为 src 属性不能为空。显示的图像将是我们在 CSS 中指定的背景图像
width: 46px; height: 44px; - 定义我们要使用的图像部分
background: url(img_navsprites.gif) 0 0; - 定义背景图像及其位置(左侧 0px,顶部 0px)
这是使用图像精灵的最简单方法,现在我们想通过使用链接和悬停效果来扩展它。

图像精灵 - 创建导航列表

我们想使用精灵图像(“img_navsprites.gif”)来创建导航列表。

我们将使用 HTML 列表,因为它可以是链接,也支持背景图像:

示例

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

示例解释:

#navlist {position:relative;} - 位置设置为相对,以允许在其中进行绝对定位
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 边距和填充设置为 0,删除列表样式,所有列表项都绝对定位
#navlist li, #navlist a {height:44px;display:block;} - 所有图像的高度为 44px
现在开始为每个特定部分定位和设置样式:

#home {left:0px;width:46px;} - 一直定位到左侧,图像的宽度为 46px
#home {background:url(img_navsprites.gif) 0 0;} - 定义背景图像及其位置(左侧 0px,顶部 0px)
#prev {left:63px;width:43px;} - 位于右侧 63px(#home 宽度 46px + 项目之间的一些额外空间),宽度为 43px
#prev {background:url(‘img_navsprites.gif’) -47px 0;} - 将背景图像定义为右侧 47px(#home 宽度 46px + 1px 线分隔符)
#next {left:129px;width:43px;} - 位于右侧 129px(#prev 的起始位置为 63px + #prev 宽度 43px + 额外空间),宽度为 43px
#next {background:url(‘img_navsprites.gif’) -91px 0;} - 将背景图像定义为右侧 91px(#home 宽度 46px + 1px 线分隔符 + #prev 宽度 43px + 1px 线分隔符)

图像精灵 - 悬停效果

在这里插入图片描述

现在我们想在导航列表中添加悬停效果。

提示::hover 选择器可用于所有元素,而不仅仅是链接。

我们的新图像(“img_navsprites_hover.gif”)包含三个导航图像和三个用于悬停效果的图像:

因为这是一张单一图像,而不是六个单独的文件,所以当用户将鼠标悬停在图像上时不会出现加载延迟。

我们只添加三行代码来添加悬停效果:

示例

#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}

示例说明:

#home a:hover {background: url(‘img_navsprites_hover.gif’) 0 -45px;} - 对于所有三个悬停图像,我们指定相同的背景位置,仅向下 45px


总结

本文介绍了的CSS 图片库和图像精灵使用,如有问题欢迎私信和评论

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程岁月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值