css sprites_现代时代CSS Sprites：精致，动画和语义

最新推荐文章于 2024-07-11 17:14:12 发布

cungui5726

最新推荐文章于 2024-07-11 17:14:12 发布

阅读量145

点赞数

文章标签： css java html python html5

原文链接：https://thenewcode.com/391/CSS-Sprites-for-the-Modern-Era-Refined-Animated-and-Semantic

版权

css sprites

CSS sprites are now almost a decade old. The core concept of the technique – creating a “panel” of images that are displayed as a background in links and moved to show different icons – is enshrined in thousands of web pages and dozens of frameworks.

CSS精灵现在已有近十年的历史了。该技术的核心概念-创建图像的“面板”，这些图像在链接中显示为背景，并移动以显示不同的图标-包含在数千个网页和数十个框架中。

As a concept, CSS sprites are very powerful: one image loaded for all buttons on a site cuts page loading times by eliminating multiple server requests for separate files. But practically, I’ve always had several issues with them:

从概念上讲，CSS Sprite非常强大：通过为站点上的所有按钮加载一个图像，可以消除多个服务器对单独文件的请求，从而缩短了页面加载时间。但实际上，我一直遇到一些问题：

Sprite panels are complex to make, requiring at least two different images for each icon state.
Sprite面板制作起来很复杂，每个图标状态至少需要两个不同的图像。
There is no alt attribute for background images: so if the sprite does not load, there is nothing to click on in the navigation.
背景图片没有alt属性：因此，如果未加载精灵，则无需在导航中单击任何内容。
Similarly, without an alt attribute CSS Sprites are not accessible.
同样，没有alt属性，CSS Sprites也无法访问。
Without alternative text, search engines lack an understanding of the purpose of links.
没有替代文本，搜索引擎将无法理解链接的目的。
CSS sprites cannot be animated, unless one tried to turn an animated GIF into a sprite (:: shudder ::)
CSS精灵不能动画，除非有人试图将动画GIF变成精灵(:: shudder：:)
Making two versions of each icon doubles the panel size, increasing load time and complicating the CSS.
为每个图标制作两个版本会使面板尺寸加倍，从而增加加载时间并使CSS复杂化。
The CSS to make a sprite work was somewhat complex, requiring multiple sets of coordinates.
使精灵工作CSS有点复杂，需要多组坐标。

In considering the redesign of this site (currently under development) I very much wanted to update the idea of CSS sprites for the 21^st century, eliminating the drawbacks of the traditional approach. I call my solution “CSS3 Sprites”. You can see an oversized example in the header image for this article.

在考虑本网站的重新设计(目前正在开发)，我非常想更新CSS精灵对21 ^世纪的思想，消除了传统方法的缺陷。我将解决方案称为“ CSS3 Sprites”。您可以在本文的标题图像中看到一个超大的示例。

The process to create a CSS3 sprite panel is just nine steps:

创建CSS3 Sprite面板的过程仅需九个步骤：

Make a sprite panel as you would traditionally, but the with icons drawn in a single state only (a monochrome theme will probably work best.). Optional: make the sprite panel twice as large as what will be actually displayed on the page.
制作一个精灵面板，与传统方式一样，但是仅在单个状态下绘制带有图标的图标(单色主题可能效果最好)。可选：将Sprite面板的大小设为页面实际显示大小的两倍。
Export the panel. If you’ve taken the optional step above, export the panel in two sizes: one at the final size of the collective icons as displayed by default on the page, say 150px × 150px, and another twice as large (ie. 300px by 300px). For this example I’ll call the first image temp-sprite-panel and the second sprite-panel. (I’d also recommend that you export the image(s) as transparent PNG files for the most flexibility).
导出面板。如果您已采取上述可选步骤，请以两种尺寸导出面板：一种以默认情况下在页面上显示的集合图标的最终尺寸导出，例如150px×150px，另一种则是两倍(即300px x 300px) )。在此示例中，我将称为第一个图像temp-sprite-panel和第二个sprite-panel 。 (为了获得最大的灵活性，我还建议您将图像导出为透明的PNG文件)。
Create an <nav> element for the navigation and place the temp-sprite-panel.png file as an img tag inside links, as you normally would. Include alt attribute values that are appropriate for the icon that will be visible at that point.
像通常那样，为<nav>创建一个<nav>元素，并将temp-sprite-panel.png文件作为img标签放置在链接中。包括适用于此时将可见的图标的alt属性值。
Attach a class to the unordered list. The class will be used for general shared properties of all uses of the sprite panel.
将class附加到无序列表。 class将用于精灵面板所有用途的常规共享属性。

At this stage, our HTML code should look something like this:

在此阶段，我们HTML代码应如下所示：

<nav class=sprites>
	a href="#">
		<img src="temp-sprite-panel.png" alt="RSS">
	</a>
	<a href="#">
		<img src="temp-sprite-panel.png" alt="About">
	</a>
	<a href="#">
		<img src="temp-sprite-panel.png" alt="Book Mode">
	</a>
</nav>

Right now, each list item link contains a copy of the entire visible sprite panel image, with the list items positioned one underneath the other. We are going to put the list items side by side while reducing the opacity of the image used in each link, to create a default “inactive” state for every icon. In our CSS:

现在，每个列表项链接都包含整个可见的精灵面板图像的副本，列表项一个位于另一个的下面。我们将并排放置列表项，同时减少每个链接中使用的图像的opacity ，以为每个图标创建默认的“非活动”状态。在我们CSS中：

nav.sprites a img {
	position: absolute;
	opacity: 0.4;
	width: 150px;
	height: 76px;
}

(Note that I've placed the size of the temp-sprite-panel.png file in the CSS).

(请注意，我已经在CSS中放置了temp-sprite-panel.png文件的大小)。

Next, we will visually restrict each image to show only the appropriate icon by using the clip property. clip requires that its element be positioned absolutely, which is why we applied it in the CSS above. We’ll apply the CSS by referencing the alt attribute of each sprite.

接下来，我们将通过使用clip属性在视觉上限制每个图像仅显示适当的图标。 clip要求将其元素绝对定位，这就是我们在上面CSS中应用它的原因。我们将通过引用每个精灵的alt属性来应用CSS。

Remember that clip uses offsets from the top and left and edges of the image to determine which portion to show. You may want to open up your sprite panel in PhotoShop to determine these numbers. For our example, they might be something like:

请记住， clip使用图像顶部，左侧和边缘的偏移量来确定要显示的部分。您可能需要在PhotoShop中打开精灵面板来确定这些数字。对于我们的示例，它们可能类似于：

img[alt="RSS"] {
	clip: rect(54px,21px,76px,0px);
}
img[alt="About"] {
	clip: rect(54px,47px,76px,25px);
}
img[alt="Book Mode"] {
	clip: rect(54px,75px,76px,48px);
}

Because clipped images have no “height” per se, we need to set a height on the navigation list. This should be the same as the height of all uses of CSS3 sprite navigation on our site (as the icons are all the same height), so we can put that on our class for our list:

由于裁剪的图像本身没有“高度”，因此我们需要在导航列表中设置height 。这应该与我们网站上所有使用CSS3 Sprite导航的高度相同(因为图标的高度都相同)，因此我们可以将其放在列表的class中：

nav.sprites {
	height: 27px;
}

With everything now in place, the last thing we need to do is create the “active” state for each icon, via a hover pseudo-selector:

现在一切就绪，我们需要做的最后一件事就是通过hover伪选择器为每个图标创建“活动”状态：

nav.sprites a:hover img {
	opacity: 1;
}

That’s it! Each sprite is now accessible, as each has its own unique alt value. If you wanted to animate the sprite transition:

而已！每个精灵现在都可以访问，因为每个精灵都有其自己的唯一alt值。如果要动画化精灵过渡：

nav.sprites a img {
	position: absolute;
	opacity: 0.4;
	width: 150px;
	height: 76px;
	transition: all 0.5s linear;
}

If you want to retain greater image quality during page zooms of the sprite panel on browsers or mobile devices, substitute sprite-panel.png for temp-sprite-panel.png in the HTML, without changing the CSS. The larger image will be shrunk down to the size of the former, smaller panel, then the clip(s) will be applied. When the page zooms, each icon will look sharper.

如果要在浏览器或移动设备上对sprite面板进行页面缩放期间保留更高的图像质量，请在不更改CSS的情况下，用sprite-panel.png替换HTML中的temp-sprite-panel.png 。较大的图像将缩小为先前较小的面板的尺寸，然后将应用clip 。页面缩放时，每个图标将显得更清晰。