如何在HTML中显示多帧GIF格式图像的特定帧? [英] How to show a specific frame of a multi-frame GIF-formatted image in HTML?

问题描述

我有一个具有多帧的GIF格式的图像:

Hi,
I have a GIF-formatted image with multi frames:

<img src="http://...SampleAddress.../specials.gif" alt="star">

我只想显示包含星形"图像的框架.我应该如何更改HTML代码?

I want to show just the frame containing the "star" image. How should I change the HTML code?

推荐答案

您想要做的是一种称为CSS Sprites的技术.拍摄问题中发布的图像，并使用CSS background-image和background-position属性更改元素中显示图像的哪一部分.

例如，假设我有一个ID为"menuItem1"的菜单项，希望对此具有鼠标悬停效果.此菜单项的宽度为100px.我可以同时创建一个包含普通图像和悬停图像的图像，并使用以下CSS来实现效果:

What you want to do is a technique called CSS sprites. Take the image you posted in your question and use the CSS background-image and background-position attributes to change which part of the image is displayed in an element.

For example, say I have a menu item with the id "menuItem1" that I want to have a mouse-over effect for. This menu item is 100px wide. I can create one image with both the normal and hover images side-by-side and use the following CSS to accomplish the effect:

#menuItem1
{
  background-image: url(http://www.myserver.com/images/menuSprite.gif);
  background-position: 0px 0px;
}
#menuItem1:hover
{
  background-image: url(http://www.myserver.com/images/menuSprite.gif);
  background-position: -100px 0px;
}

这是Smashing Magazine上有关CSS精灵的一篇很好的文章，链接到许多工具和教程:
http://www.smashingmagazine.com /2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/ [

Here is a good article about CSS sprites from Smashing Magazine that links to a bunch of tools and tutorials:
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/[^]

这篇关于如何在HTML中显示多帧GIF格式图像的特定帧?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！