ການສິ່ງດັບ CSS - ການສະແດງ image sprite

ຮູບສະຫວ່າງນິວນີ

ຮູບສະຫວ່າງນິວນີແມ່ນກຸ່ມຮູບພາບທີ່ຢູ່ໃນຮູບພາບດຽວ.

ເວັບໄຊທີ່ມີຫຼາຍຮູບພາບອາດຈະຕ້ອງໃຊ້ເວລາຫຼາຍໃນການເຕີບໜ້າ, ແລະຈະສ້າງຈຳນວນການຮຽກຮ້ອງສຳນັກງານຫຼາຍ.

ການໃຊ້ຮູບສະຫວ່າງນິວນີຈະຫຼຸດຈຳນວນການຮຽກຮ້ອງສຳນັກງານທີ່ມີຄວາມຫຼາຍ ແລະຫຼຸດຄວາມບໍ່ຫຼາຍຂອງລາຍການທາງລາຍການ.

ຮູບສະຫວ່າງນິວນີ - ເປັນກໍລະນີທຳມະດາ

ພວກເຮົາໃຊ້ຮູບພາບທີ່ມີຫຼາຍຮູບພາບ ('navsprites.gif') ທີ່ບໍ່ໃຊ້ຮູບພາບອັນດຽວສາມບັນນາທິດ:

ຮູບພາກສາຍທາງ

ພາຍໃນການໃຊ້ CSS, ພວກເຮົາສາມາດສະແດງພາບພາຍໃນຮູບພາບທີ່ຈະຕ້ອງການ.

ໃນຄວາມຄິດທີ່ຖືກຈັດຕັ້ງໃຫ້, CSS ກຳນົດທີ່ຈະສະແດງສ່ວນໃດຂອງຮູບພາບ 'navsprites.gif':

ຄວາມນິຍົມ

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

Try It Yourself

Example Explanation:

  • <img id="home" src="trans.gif"> - ກຳນົດຮູບພາບທີ່ສິດທີ່ບໍ່ມີສິນຄ່າ, ຍ້ອນວ່າ src ບໍ່ສາມາດຈະນຳໃຊ້. ຮູບພາບທີ່ສະແດງຢູ່ແມ່ນຮູບພາບບໍລິການທີ່ພວກເຮົາກຳນົດໃນ CSS.
  • width: 46px; height: 44px; - ກຳນົດຮູບພາບທີ່ພວກເຮົາຈະໃຊ້
  • background: url(navsprites.gif) 0 0; - ກຳນົດຮູບພາບບໍລິການ ແລະການຕັ້ງລະບົບ (left 0px, top 0px)

ຮູບສະຫວ່າງນິວນີ - ສ້າງລາຍການນຳທາງ

ພວກເຮົາຫວັງວ່າຈະໃຊ້ຮູບສະຫວ່າງນິວນີ ('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;
}

Try It Yourself

Example Explanation:

  • #navlist {position:relative;} - ການກຳນົດລະບົບທີ່ຕັ້ງຢູ່ທີ່ຕາມຄວາມຄິດ, ເພື່ອອະນຸຍາດທີ່ຈະກຳນົດຕັ້ງຢູ່ພາຍໃນ
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 外边距和内边距设置为 0，删除 list-style，并且所有列表项都均为绝对定位
  • #navlist li, #navlist a {height:44px;display:block;} - 所有图片的高度均为 44px

现在开始为每个特定部分设置定位和样式：

  • #home {left:0px;width:46px;} - 一直向左定位，图像宽度 46px
  • #home {background:url(navsprites.gif) 0 0;} - 定义背景图片及其位置（left 0px, top 0px）
  • #prev {left:63px;width:43px;} - 向右定位 63px（#home 宽度 46px + 项目之间的一些额外空间），宽度 43px。
  • #prev {background:url('navsprites.gif') -47px 0;} - 定义背景图片向右 47px（#home 宽度 46px + 1px 分隔线）
  • #next {left:129px;width:43px;} - 向右定位 129px（#prev 开始是 63px + #prev 的宽度是 43px + 多余的空格），宽度 43px。
  • #next {background:url('navsprites.gif') -91px 0;} - 定义背景图片向右 91px（#home 宽度 46px + 1px 分隔线+ #prev 宽度 43px + 1px 分隔线）

图像精灵 - 悬停效果

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

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

我们的新图像（"navsprites_hover.gif"）包含三幅导航图像和三幅用于悬停效果的图像：

ຮູບພາກສາຍທາງ

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

我们仅添加三行代码来实现悬停效果：

ຄວາມນິຍົມ

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

Try It Yourself

Example Explanation:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - We specify the same background position for all three hover images, just 45 pixels down