css精灵_CSS精灵

最新推荐文章于 2024-08-04 21:50:13 发布

cungui5726

最新推荐文章于 2024-08-04 21:50:13 发布

阅读量135

点赞数

文章标签： css java html python js ViewUI

原文链接：https://thenewcode.com/332/CSS-Sprites

版权

css精灵

A strongly graphical web page will usually feature most of its navigation as icons. There are several ways of creating these icons: creating them with an appropriate Unicode symbols, bitmaps, or SVG. In this article, I'll focus on the second option.

高度图形化的网页通常会将大多数导航功能都显示为图标。有几种创建这些图标的方法：使用适当的Unicode符号，位图或SVG创建它们。在本文中，我将重点介绍第二个选项。

重要的提示 (Important Note)

We are talking here about purely graphical icons: if you want to add effects to menu text, that can (and should) be done in CSS. Here, we’re talking about complete changes to the icon image from one state to another using effects not currently achievable by CSS alone, thus requiring two different bitmap images.

我们在这里谈论的是纯粹的图形图标：如果要向菜单文本添加效果，可以(并且应该)在CSS中完成。在这里，我们正在谈论使用当前仅靠CSS无法实现的效果将图标图像从一种状态完全转换为另一种状态，因此需要两种不同的位图图像。

To add interactivity, we have to swap the initial image with a second image, usually on mouse rollover. The simplest way to do that is to place the first image as a background, and on hover, swap it for a second. This technique is known as CSS spriting.

为了增加交互性，我们通常必须在鼠标悬停时将初始图像与第二个图像交换。最简单的方法是将第一张图片作为背景，并悬停时将其交换第二张。这种技术被称为CSS spriting 。

Our first image, multimedia.png, looks like this:

我们的第一个图像，multimedia.png，如下所示：

This is our second image,

multimedia-hover.png, with a glow effect.

multimedia-hover.png 。

This is our basic HTML:

这是我们的基本HTML：

<nav>
	<a href="#" id="multimedia"></a>
	<a href="#" id="storage"></a>
</ul>

To this, we add this CSS:

为此，我们添加以下CSS：

nav a {
	display: inline-block;
	width: 171px;
	height: 123px;
}
a#multimedia {
	background-image: url(multimedia.png);
}
a#multimedia:hover {
	background-image: url(multimedia-hover.png);
}

There are two conditions that must be met for CSS Sprites to work correctly:

CSS Sprite正常工作必须满足两个条件：

Both images must be exactly the same size. Trying to swap images of different sizes will result in the apparent motion of the icons on mouseover, “jumping as they move between states. This takes careful design.
两个图像的大小必须完全相同。 尝试交换不同大小的图像将导致鼠标悬停时图标的明显运动，“当它们在状态之间移动时会跳转。” 这需要仔细的设计。
The a tag must be given a height and width that exactly matches the size of the initial image. This means that the a tag must be set to display: block or inline-block, or be provided with enough padding to see through its window to view the background image.
在a标签必须给予height和width恰好初始图像的尺寸相匹配 。这意味着必须将a标签设置为display: block或inline-block ，或者提供足够的padding以通过其窗口查看背景图像。
But wait! We can improve on this: if the window of the
a element is only large enough to see one of the image states, why don’t we merge the images together, and show just one half or the other using background-position? By doing so, we load just one image, rather than two, and reduce the number of HTTP requests, which is one of the central techniques to speeding up the load time of a web page. We also eliminate the possibility of seeing a flash as the hover image is loaded for the first time.
a元素的窗口仅大到可以看到图像状态之一，为什么不将图像合并在一起，并使用background-position仅显示其中一半？这样，我们仅加载一个图像，而不是两个，并减少了HTTP请求的数量，这是加快网页加载时间的核心技术之一。我们还消除了在首次加载悬停图像时看到闪光的可能性。

Our HTML is unchanged, but the CSS changes to:
我们HTML不变，但是CSS更改为：
```
a#multimedia {
	display: inline-block;
	background-image: url(multimedia.png);
}
a#multimedia:hover {
	background-position: bottom left;
}
```
JQuery UI CSS Sprite icon panel jQuery UI CSS Sprite图标面板

You can take this much further and create an entire panel of icons in a single image, shifting it around to show different icons for different links using background-position, significantly saving load time.
您可以更进一步，在单个图像中创建整个图标面板，将其移动以使用background-position显示不同链接的不同图标，从而大大节省了加载时间。

CSS Sprites are a useful technique, but have some significant drawbacks:

CSS Sprites是一种有用的技术，但是有一些明显的缺点：

If the images don’t load for any reason, your users will likely be lost. Unlike real images in an <img> tag, background images do not have a text alternative. If they don’t load, nothing shows.
如果由于任何原因未加载图像，则您的用户可能会丢失。与<img>标签中的真实图像不同，背景图像没有替代文本。如果未加载，则不会显示任何内容。
Lack of alt text reduces semantics and SEO. Search engines will still follow the link, but they won’t be able to able to understand its context, as there is no text within the link itself.
缺少alt文字会减少语义和SEO 。搜索引擎仍会跟随该链接，但是它们将无法理解其上下文，因为链接本身内没有文本。
Changes to the design can mean a lot of rework to an icon panel, especially if the icons change in size (although this could be mitigated by using background-size).
对设计的更改可能意味着对图标面板进行大量的返工，尤其是在图标的大小发生变化的情况下(尽管可以通过使用background-size来缓解这种情况)。

更多资源 (Further Resources)

Spritemapper is an application for Mac, Linux and Windows that merges single sprites into one image file and creates the CSS for you.

Spritemapper是一款适用于Mac，Linux和Windows的应用程序，可将单个精灵合并为一个图像文件并为您创建CSS。
翻译自: https://thenewcode.com/332/CSS-Sprites

css精灵