65.9K
CodeProject 正在变化。 阅读更多。
Home

在 ASP.NET 网站上即时生成 CSS 精灵图和缩略图

Matt Perdeck
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.82/5 (40投票s)

2011 年 8 月 3 日

CPOL

64分钟阅读

viewsIcon

129580

downloadIcon

2845

通过将页面图像和 CSS 背景图像合并为 CSS 精灵图，从而减少 ASP.NET 网站的页面加载时间。压缩并实际调整图像大小以制作缩略图。支持重复的背景图像。

引言

在大多数网页上，图像构成了浏览器加载以显示页面的文件的大部分。这对于移动网站尤其重要，因为 下载速度慢、网络延迟高以及用户流量成本高。

因此，您可以通过压缩大图像、 正确调整缩略图大小以及将小图像合并为 CSS 精灵图以减少请求/响应开销，从而显著降低流量成本和页面加载时间。

CSS 精灵图生成器可以为您完成所有这些工作。您只需将其 安装到您的网站即可。一切都通过 web.config 控制，因此无需更改您的网站。

该软件包在页面首次加载时即时生成压缩和合并的图像。这样，就不需要更改构建过程。通过缓存将 CPU 开销降至最低，因此，在初始页面加载之后，在大多数情况下，该页面不再进行图像处理。

为了便于上手，此包具有合理的默认设置，因此无需额外 配置即可直接使用（您稍后可以通过 25 多个设置进行微调）。

此外，在 安装部分之后，还有一个 快速入门部分。下载中的解决方案包含 10 个简单但功能齐全的演示网站，展示了该包的各种功能。

如果您喜欢这篇文章，请 投票支持。

目录

要求

  • ASP.NET 4 或更高版本
  • IIS 6 或更高版本（用于您的在线网站）

此软件包可以在只提供 中等信任的共享主机帐户中运行，例如 GoDaddy 提供的帐户。它也可以在提供完全信任的帐户中运行。

与 ASP.NET 精灵图和图像优化库相比的功能

本节将 ASP.NET CSS 精灵图生成器包与另一个为 ASP.NET 网站即时生成精灵图的主要包 Microsoft 的 ASP.NET 精灵图和图像优化库进行比较。

这两个包最大的区别在于 ASP.NET CSS 精灵图生成器包的安装和配置要简单得多。

  • 使用 ASP.NET 精灵图和图像优化库时，您必须将所有要合并为精灵图的图像移动到一个单独的 App_Sprites 目录。您还需要手动将这些图像的 img 标签替换为特殊的自定义控件。其他配置包括添加特殊的 settings.xml 文件。

  • 使用 ASP.NET CSS 精灵图生成器包时，只需在 web.config 中添加几行即可 - 无需移动图像或更改页面。

以下是 ASP.NET CSS 精灵图生成器包与 ASP.NET 精灵图和图像优化库的更详细功能比较：

CSS 精灵图
生成器包		 ASP.NET 精灵图 和 图像
优化库
即时合并图像（动画图像除外）。当您将图像添加到页面时，它将被拾取，无需额外的构建步骤。
处理动态生成的图像标签，例如来自数据库的图像。
图像可以根据文件类型、宽度、高度和其他属性（详情）可选地合并。
允许您将特定目录中的所有图像合并到在页面之间共享的精灵图中，以最大化浏览器缓存（详情）。
使用复杂的 算法生成可能的最小精灵图。
处理 PNG、GIF 和 JPEG 图像。
处理 CSS 背景图像。支持重复的背景图像和与 滑门技术一起使用的背景图像（例如用于灵活按钮和选项卡）（详情）。
易于安装 - 只需将 .dll 添加到您的网站并在 web.config 中添加几行（安装说明）。所有 配置都在 web.config 中完成。无需重新组织图像或使用特殊控件。
允许您按页面或页面组切换功能（详情）。
允许您通过减少其颜色深度即时压缩 PNG 和 GIF 文件。选择 6 种内置算法之一，或使用默认设置（详情）。
允许您通过减少其图像质量即时压缩 JPEG 文件 （详情）。
允许您即时物理调整图像大小（例如用于缩略图），可通过 web.config 中的配置（详情）或通过在 img 标签上设置 width 和/或 height 属性（详情）。
允许您设置精灵图的最大文件大小，因此过大的精灵图会被自动拆分成更小的精灵图（详情）。
正确显示生成的精灵图所需的额外生成的 CSS（详情）可以内联，也可以自动放置在单独的 CSS 文件中（详情）。
可与低成本共享主机计划（如 GoDaddy）上的网站一起使用（详情）。
允许您配置软件包，使其仅在 Release 模式下激活。这样，您可以在开发时看到单独的未处理图像，并在您的在线网站中获得性能改进（详情）。
可以选择在图像丢失时抛出异常，以便您快速检测丢失的图像（详情）。
生成内联图像
支持 Web 场
支持 MVC3 Razor
为了减少软件包引起的 CPU 开销和磁盘访问，会缓存中间结果。当基础文件发生更改时，缓存条目会被删除，因此您永远不会提供过时的文件。

上述功能都可以通过 web.config 文件在 ASP.NET CSS 精灵图生成器包中单独开启和关闭（完整说明）。如果您只安装包而不进行任何进一步配置，它会将所有宽度和高度不超过 100px 的 PNG 和 GIF 图像（动画图像除外）合并到精灵图中 - 这通常是您想要的。默认情况下，它仅在网站处于 Release 模式时激活（详情）。

此包只是改进网站性能的一种方式。我最近发布的书 ASP.NET Performance Secrets 展示了如何使用 Windows、IIS 和 SQL Server 内置的各种工具和性能计数器来查明网站最大的性能瓶颈。然后展示了如何修复这些瓶颈。它涵盖了网站使用的所有环境 - Web 服务器、数据库服务器和浏览器。这本书非常注重实践 - 目标是立即提高网站性能，而不是先研究大量理论。

CSS 精灵图简介

什么是 CSS 精灵图？

网页通常包含许多小图像，所有这些图像都必须由 浏览器单独请求，然后由服务器提供。通过将这些小图像合并为一个稍大的图像，可以节省流量和页面加载时间，原因如下：

  • 从浏览器到服务器的每个文件请求都会因网络协议而产生固定的开销。对于小图像文件，该开销可能很大。发送更少的文件意味着更少的请求/响应开销。
  • 每个图像文件本身都带有某些管理开销。合并小图像会得到一个比单独图像总和小得多的组合图像。

以这段 HTML 为例：

<img src="cssspritegenerator/contactus.png" width="50" height="50" />
<img src="cssspritegenerator/cart.png" width="50" height="50" />
<img src="cssspritegenerator/print.png" width="46" height="50" />

它会加载这些图像：

cart.png contactus.png print.png
大小：2.21 KB 大小：2.02 KB 大小：2.05 KB 总大小：6.28 KB
50px x 50px 50px x 50px 46px x 50px

将这些图像合并后，您将得到这个组合图像：

combined.png
大小：3.94 KB
146px x 50px

3.94 KB 的大小仅为三个单独图像组合大小的 63%。

显示单个图像

虽然这三个图像现在已合并为一个图像，但它们仍然可以使用一种称为 CSS 精灵图的技术显示为单个图像。

CSS background 属性允许您指定背景图像中的偏移量，从那里开始显示背景图像作为背景。这可以用于将组合图像滑动到每个img标签上，以便显示正确的区域。

<img style="width: 50px; height: 50px; background: url(combined.png) -0px -0px;" />
<img style="width: 50px; height: 50px; background: url(combined.png) -50px -0px;" />
<img style="width: 46px; height: 50px; background: url(combined.png) -100px -0px;" />
  • 购物车图像位于组合图像的左侧边缘和顶部边缘，因此偏移量为 0px 0px。
  • 联系我们图像位于距离左边缘 50px 的位置，位于顶部边缘，因此偏移量为 -50px 0px。
  • 最后，打印图像位于距离左边缘 100px 的位置，位于顶部边缘，因此偏移量为 -100px 0px。

请注意，img 标签的宽度和高度等于原始单个图像的宽度和高度。这样，您只能看到组合图像中对应于单个图像的部分。

仍然存在一个问题：如果没有 src 属性，img 标签可能会显示为损坏的图像。您可以通过将 src 设置为透明的 1x1 像素图像来规避此问题。由于此图像仅占用 60 字节，因此最有效的解决方案是将其内联。

<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width: 50px; height: 50px; background: url(combined.png) -0px -0px;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width: 50px; height: 50px; background: url(combined.png) -50px -0px;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width: 46px; height: 50px; background: url(combined.png) -100px -0px;" />

尽管额外的内联图像和 CSS 看起来很大，但它们的开销应该很小，因为它们是高度可压缩的，因为它们有大量的重复文本。这假设您的 Web 服务器已启用压缩（详情），这通常是这样的。

此外，除了将额外的 CSS 内联在 img 标签中，您还可以将其放在外部 .css 文件中，并使用 CSS 类将 img 标签与其 CSS 链接。该包通过 inlineSpriteStyles 属性支持这两种选项。

如果您想知道如何编写所有这些 CSS 和 HTML，这个包都会为您完成。本节仅说明如何实现。

Internet Explorer 7 和 6 不支持内联图像。这些浏览器的流量份额约为 5%（2012 年 6 月）。为了处理这部分日益减少的流量份额而引入复杂的解决方案，还不如直接关闭该包，以便从这些浏览器发送的请求接收原始图像。

控制精灵图的大小

如果您不加区别地将图像合并到精灵图中，您可能会得到非常大的精灵图，加载速度很慢。现在，大多数浏览器同时加载至少 6 个图像，您可能最好拥有几个中等大小的精灵图，而不是一个大精灵图。

为了管理精灵图的大小，您可以确定要合并的图像的最大宽度、高度和文件大小。您还可以设置最大精灵图大小 - 以便过大的精灵图可以分成两个。

使用共享主机

您的网站可能使用共享主机计划，这意味着它与许多其他网站共享一个 Web 服务器。许多提供这些计划的公司，如 GoDaddy，会限制每个网站可以执行的操作，以免它们互相影响。

用技术术语来说，这意味着您的在线网站具有 信任级别中等。在开发环境中，它具有完全信任级别，意味着它可以执行任何操作。

该包是专门为此而构建的，可以在中等信任级别下运行，因此您应该可以轻松地将其用于共享主机计划中的网站。

唯一的问题是，该包生成的精灵图在中等信任级别下的文件大小可能比在完全信任级别下稍大。这是因为一些用于减少图像颜色数量的算法在中等信任级别下不可用。更多详情 在此。

安装

请按照以下步骤将 ASP.NET CSS 精灵图生成器包添加到您的网站：

  1. 编译包：
    1. 下载包含源代码的 zip 文件，并在一个目录中解压缩。
    2. 在 Visual Studio 2010 或更高版本中打开 CssSpriteGenerator.sln 文件。
    3. 您会发现源文件被组织在一个解决方案中，包含以下元素：
      1. 项目 CssSpriteGenerator 是实际的包。
      2. 一些演示网站，包含该包使用示例。如果需要，您可以忽略这些。
    4. 编译解决方案。这将在 CssSpriteGenerator\bin 文件夹中生成一个 CssSpriteGenerator.dll 文件。

  2. 更新您的网站：
    1. 将 CssSpriteGenerator.dll 的引用添加到您的网站（在 Visual Studio 中，右键单击您的网站，选择添加引用）。
    2. 在 web.config 的 configSections 部分中添加自定义节 cssSpriteGenerator：
      <configuration>
    ...
    <configSections>
        ...
        <section name="cssSpriteGenerator" type="CssSpriteGenerator.ConfigSection" requirePermission="false"/>
        ...
    </configSections>
    ...
</configuration>
    3. 添加一些初始配置设置
      <configuration>
    ...
    <configSections>
        ...
        <section name="cssSpriteGenerator" type="CssSpriteGenerator.ConfigSection" requirePermission="false"/>
        ...
    </configSections>
    ...
    <cssSpriteGenerator active="Always">
        <imageGroups>
            <add maxWidth = "100" maxHeight = "100" maxSpriteSize = "30000" samePixelFormat = "true" />
        </imageGroups>
    </cssSpriteGenerator>
    ...
</configuration>

      在 快速入门部分，您将看到这些设置的作用。

    4. 在网站的根文件夹中添加一个名为 App_Browsers 的文件夹：在 Visual Studio 中右键单击您的网站，选择添加 ASP.NET 文件夹，然后选择App_Browsers。
    5. 使用您喜欢的文本编辑器（如记事本）在 App_Browsers 文件夹中创建一个文本文件。将其命名为 PageAdapter.browser。将此代码复制并粘贴到该文件中：
      <browsers>
    <browser refID="Default">
        <controlAdapters>
            <adapter controlType="System.Web.UI.Page"
               adapterType="CssSpriteGenerator.CSSSpriteGenerator_PageAdapter" />
        </controlAdapters>
    </browser>
</browsers>
      这告诉 ASP.NET 将页面的处理交给 CssSpriteGenerator.CSSSpriteGenerator_PageAdapter 类（它是包的一部分）。

快速入门

关于所有选项及其配置方式的完整说明可在 配置部分找到。但选项很多，因此本节将介绍可能与您最相关的选项，以便您快速上手。

下载的解决方案包含一系列带有工作示例的演示网站。演示网站 DemoSite_QuickStart 已设置为方便您遵循本节 - 在本节的后续部分将其 web.config 应用于该文件，然后运行网站以查看更改如何导致生成不同的精灵图。

本节讨论以下场景：

默认配置

在您完成安装后立即执行

  • 该包在 Debug 和 Release 模式下都处于活动状态。
  • 只有宽度或高度不超过 100 像素的图像才会被合并到精灵图中。
  • 当大于 30,000 字节时，精灵图将被拆分。
  • 图像将按像素格式进行分类，因此每像素 8 位的图像不会与每像素 24 位的图像放在同一个精灵图中（原因）。

要试用

  • 打开您网站上具有多个宽度和高度小于 100px 的图像的页面。
  • 查看页面的源代码以查看精灵图的 HTML。 
  • 您将在网站根目录中找到一个名为 ___spritegen 的新目录，其中包含生成的精灵图。

仅在 Release 模式下使用该包

您可以使用 web.config 文件中 cssSpriteGenerator 元素中的 active 属性来控制该包的激活时间。

要确保该包仅在 Release 模式下激活，请将其设置为 ReleaseModeOnly

<configuration>
    ...
    <cssSpriteGenerator active="ReleaseModeOnly">
        ...
    </cssSpriteGenerator>
    ...
</configuration>

处理更大的图像

要允许更大的图像合并到精灵图中，请在 cssSpriteGenerator 元素中更改 imageGroup 上的 maxWidth 或 maxHeight 属性，如下所示：

<configuration>
    ...
    <cssSpriteGenerator active="Always">
        <imageGroups>
            <add maxWidth="200" maxHeight="300" maxSpriteSize = "30000" samePixelFormat = "true"/>
        </imageGroups>
    </cssSpriteGenerator>
    ...
</configuration>

图像组是该包的基本概念。当在当前页面、背景图像组或服务器上的目录中找到图像时，它首先会被添加到组中。您可以为可以添加到组中的图像设置限制，例如 最大宽度、最大高度、文件路径等。然后，组中的图像将被合并到一个或多个精灵图中。如果图像未被添加到任何组，它将被忽略。

稍后，您将看到如何拥有多个组，以及每个组的后处理选项。

共享精灵图

默认情况下，该包会检查当前页面是否有要合并到精灵图中的图像。但是，您可能希望它为所有小型图像生成精灵图，而不管它们出现在哪个页面上。这样，您可能会得到一个包含所有小图标的单个精灵图。

这些精灵图然后可以在页面之间共享。 这样，当您的访问者转到您网站上的另一个页面时，该共享精灵图可能仍然在他们的 浏览器缓存中，因此无需从您的服务器重新加载。

您可以通过 processFolderImages 和 imageFolderPathMatch 属性让该包读取来自服务器上的一个或多个文件夹的图像，而不仅仅是当前页面上的图像。然后将它们分配给组，因此您可以按图像宽度和高度等进行过滤。

假设您的图像位于 Web 服务器上的 images 目录中，您可以这样写：

<configuration>
    ...
    <cssSpriteGenerator active="Always" 
    processFolderImages="true" imageFolderPathMatch="\\images\\" ... >
        <imageGroups>
            <add maxWidth = "100" maxHeight = "100" maxSpriteSize = "30000" samePixelFormat = "true" />
        </imageGroups>
    </cssSpriteGenerator>
    ...
</configuration>

现在，该包从页面和图像文件夹中读取图像。与之前一样，只有宽度或高度不超过 100 像素的图像才会被合并到精灵图中。

为什么 \\images\\ 中会有双反斜杠？ imageFolderPathMatch 接受正则表达式，并且反斜杠在正则表达式中是一个特殊字符，因此需要用另一个反斜杠转义。

压缩大型 JPEG 图像

许多网站都有大型照片，如果有人压缩它们，可以节省大量带宽。压缩图像可以在不明显损失图像质量的情况下节省大量字节，但人们通常不会花时间去做。

您可以通过 将照片添加到精灵图，然后 使用 jpegQuality 属性降低该精灵图的图像质量来压缩 JPEG 图像。将其设置为 70% 通常能取得良好效果。 

但是，您可能不希望将多个大照片文件合并到精灵图中，因为您最终可能会得到非常大的精灵图，加载速度很慢。为了确保每张照片都有自己的精灵图，请使用 giveOwnSprite 属性。 

您可以通过使用多个组来实现这一切：

  • 一个组用于您的大型照片。这些照片将被压缩，每个精灵图只包含一张图像。
  • 另一个组用于您的小型图像。在这里，可以将多个图像合并到精灵图中。

结果如下：

<configuration>
    ...
    <cssSpriteGenerator active="Always" >
        <imageGroups>
             <add filePathMatch="\\photos\\" 
                 jpegQuality="70" giveOwnSprite="true" />
            <add maxWidth = "100" maxHeight = "100" maxSpriteSize = "30000" samePixelFormat = "true" />
        </imageGroups>
    </cssSpriteGenerator>
    ...
</configuration>

第一个组将只包含文件路径中有 \\photos\\ 的图像。任何匹配此条件的图像都将拥有自己的精灵图，其质量将降低到 70%。不匹配第二个组的图像将匹配第二个组 - 因此，如果它们宽度或高度不超过 100 像素，它们将被合并到精灵图中。不匹配第二个组的图像将不会合并到精灵图中。

压缩后的照片会与其他生成的图像一起出现在 ___spritegen 目录中。检查它们的文件大小以查看节省了多少字节。如果您在 DemoSite_QuickStart 网站上尝试此操作，您会发现大照片的文件大小从 79.3KB 减小到 58.6KB - 节省了 26%，且没有明显的质量损失。

生成缩略图

您的网站可能有一些缩略图链接到全尺寸照片。如果您有几张照片，制作缩略图并不难。但如果您有很多照片，那就会变得很费力。

或者，您可以使用原始图像，并使用 img 标签的 width 和 height 属性来减小页面上的尺寸。但是，这会导致浏览器加载全尺寸的原始图像文件，这并不是带宽的最佳利用方式。

为了解决这个问题，该软件包会物理调整那些 width 和 height 属性与其物理宽度和高度不同的图像的大小。

或者，您可以使用 resizeWidth 和/或 resizeHeight 属性。

<configuration>
    ...
    <cssSpriteGenerator ... >
        <imageGroups>
             <add filePathMatch="\\photos\\" resizeHeight="200" ... />
        </imageGroups>
    </cssSpriteGenerator>
    ...
</configuration>

使用 pageUrlMatch 属性来仅调整缩略图页上的照片大小，而不在原始图像所在的页面上进行调整。如果您的缩略图页面名为 thumbnail.aspx，您可以这样写：

<configuration>
    ...
    <cssSpriteGenerator ... >
        <imageGroups>
             <add filePathMatch="\\photos\\" resizeHeight="200" 
                 pageUrlMatch="thumbnail.aspx" ... />
        </imageGroups>
    </cssSpriteGenerator>
    ...
</configuration>

配置

软件包的配置分为三类：

  • 整体配置 - 适用于整个软件包的设置，例如它是否激活，是否处理页面图像等。
  • 图像组 - 确定哪些图像被处理以及如何处理。您在快速入门部分中已经遇到过组。
  • cssImages 元素 - 告诉软件包处理哪些 CSS 背景图像，并设置合并它们以适应重复背景图像的限制。

这些类别将在以下各节中讨论。

整体配置

该包支持以下全局配置设置：

总体开关

图像收集

决定软件包如何查找要处理的图像的选项。

精灵图生成

决定软件包如何生成精灵图的选项。

总体开关

active

确定软件包何时激活。当它未激活时，它根本不会影响您的网站，本节中列出的其他属性或子元素都不会生效。

值 描述
Never 软件包永不激活，无论调试模式如何。
Always 软件包始终激活，无论调试模式如何。
ReleaseModeOnly
（默认）		 软件包仅在 Release 模式下激活。
DebugModeOnly 软件包仅在 Debug 模式下激活。

示例

<cssSpriteGenerator active="Always" >
    ...
</cssSpriteGenerator>

您的网站处于 Debug 还是 Release 模式取决于 web.config 文件中 compilation 元素下的 debug 属性。如果该属性设置为 false，则您的网站处于 Release 模式（正如它应该的那样）。当设置为 true 时，它处于 Debug 模式（正如开发时应该的那样）。它在 web.config 中的样子如下：

<configuration>
    ...
    <system.web>
        <compilation debug="true">
            ...
        </compilation>
        ...
    </system.web>
    ...
</configuration>

默认情况下，该软件包仅在 Release 模式下激活 - 因此您在开发时不会看到任何效果。要确保该软件包在 Release 模式和 Debug 模式下都激活，请将 active 设置为 Always，如 上例所示。

请注意，active 属性充当整个软件包的主开关。如果它未激活，则其他任何属性都无效。 

exceptionOnMissingFile

确定软件包在图像文件丢失时是否抛出异常。

值 描述
Never
（默认）		 软件包从不抛出异常，除非图像文件丢失。
Always 软件包始终抛出异常，除非图像文件丢失。
ReleaseModeOnly 软件包仅在网站处于 Release 模式时抛出异常。
DebugModeOnly 软件包仅在网站处于 Debug 模式时抛出异常。

示例

<cssSpriteGenerator exceptionOnMissingFile="DebugModeOnly" ... >
    ...
</cssSpriteGenerator>

为了处理图像，软件包必须实际读取该图像。如果 Web 服务器上找不到图像文件怎么办？这由 exceptionOnMissingFile 属性决定。

  • 如果 exceptionOnMissingFile 处于活动状态（请参阅上表），并且软件包发现找不到图像文件，它将抛出带有图像路径的异常。这使得查找丢失的图像更容易。
  • 如果 exceptionOnMissingFile 未激活，软件包将不抛出异常，而是通过不处理图像来恢复。例如，如果图像是通过 img 标签找到的，它将保持 tag 不变。

如果所有图像都应该存在于您的开发环境中，那么将 exceptionOnMissingFile 设置为 DebugModeOnly 是有意义的。这样，您可以在开发网站时快速找到损坏的图像，同时防止在线网站出现异常，因为在线网站可能更倾向于损坏的图像而不是异常。

请记住，如果您希望在网站处于 Debug 模式时出现异常，您必须确保该软件包在 Debug 模式下处于活动状态 - 将 active 设置为 Always 才能实现。

图像收集

processPageImages

确定是否处理当前页面上的图像。

值 描述
Never 当前页面上的图像从不处理。
Always
（默认）		 当前页面上的图像始终处理。
ReleaseModeOnly 如果网站处于 Release 模式，则处理当前页面上的图像。
DebugModeOnly 如果网站处于 Debug 模式，则处理当前页面上的图像。

示例

<cssSpriteGenerator processPageImages="Never" ... >
</cssSpriteGenerator>

通常，当您网站上的页面打开时，该包会查找页面上的所有 img 标签，将它们分配给 图像组，然后处理这些组以生成精灵图。然后，它会用 div 标签替换 img 标签，这些 div 标签显示与原始图像匹配的精灵图部分 - 因此您的页面外观保持不变，但加载速度更快（详情）。

当您关闭 processPageImages 时，该包将不再扫描页面查找 img 标签。它也不会替换任何 img 标签。

如果您只想 处理 CSS 背景图像，则会关闭 processPageImages。

processCssImages

确定 cssImages 中列出的 CSS 背景图像是否被处理。

值 描述
Never CSS 背景图像从不处理。
Always
（默认）		 CSS 背景图像始终处理。
ReleaseModeOnly 如果网站处于 Release 模式，则处理 CSS 背景图像。
DebugModeOnly 如果网站处于 Debug 模式，则处理 CSS 背景图像。

示例

<cssSpriteGenerator processCssImages="Never" ... >
</cssSpriteGenerator>

如果此选项处于活动状态（默认），则软件包将处理您在 cssImages 元素中列出的 CSS 背景图像。

processFolderImages

确定是否处理存储在 Web 服务器上一个或多个文件夹中的图像。 请参阅下载解决方案中的示例网站 DemoSite_FolderImages。

值 描述
Never
（默认）		 软件包从不处理 Web 服务器上的文件夹中的图像。
Always 软件包始终处理 Web 服务器上的文件夹中的图像。
ReleaseModeOnly 如果网站处于 Release 模式，软件包才处理 Web 服务器上的文件夹中的图像。
DebugModeOnly 如果网站处于 Debug 模式，软件包才处理 Web 服务器上的文件夹中的图像。

示例

<cssSpriteGenerator processFolderImages="Always" ... >
</cssSpriteGenerator>

除了让软件包查找当前 Web 页面上的图像（如果 processPageImages 处于活动状态）和 cssImages 元素中的图像（如果 processCssImages 处于活动状态）之外，您还可以让它从 Web 服务器上的一个或多个文件夹中查找图像。

为什么您要将未实际在页面上的图像添加到精灵图中？考虑一个非常简单的网站，它在其页面上使用了 3 个小图标，但并非所有图标都出现在所有页面上。

页面使用的图标
default.aspxcontactus.png, cart.png, print.png
contactus.aspxcart.png, print.png
cart.aspxcontactus.png, print.png

如果您只让该包读取当前 Web 页面上的图像，那么它会为每个页面创建不同的精灵图，因为每个页面都有不同的图标集。但是，将所有 3 个图标放在一个精灵图中会效率高得多。这样，当访问者从一个页面切换到另一个页面时，该单个精灵图可能仍在其浏览器缓存中，因此无需再次通过 Internet 加载。实现这一目标的方法是让该包在创建精灵图时读取所有图标，而不仅仅是当前 Web 页面上的图标。

要让软件包从 Web 服务器上的一个或多个文件夹中查找图像，请将 processFolderImages 设置为活动状态。然后，您还需要设置 imageFolderPathMatch 来具体确定要读取哪些图像。

与从当前 Web 页面和 cssImages 元素获取的图像一样，从一个或多个文件夹获取的图像首先会被分配到 图像组。只有分配到组的图像才能成为精灵图的一部分。

这意味着，如果您想将特定图像添加到精灵图，即使它们不在当前 Web 页面上也不在 cssImages 元素中，您也必须执行以下步骤：

  1. 将 processFolderImages 设置为活动状态；
  2. 确保所需图像的文件路径与 imageFolderPathMatch 匹配；
  3. 确保图像匹配一个 组，以便它们可以被处理成精灵图。从文件夹获取的图像不必都匹配同一个组。

例如，如果您有一个名为 images\icons 的文件夹，其中包含 PNG 和 GIF 图像，并且您希望无论它们是否出现在当前页面上，所有这些图像都制作成精灵图，您可以这样做：

<!--switch on processing of images from web server folders, but only process those 
that are in images\icons and that end in PNG or GIF-->
<cssSpriteGenerator processFolderImages="Always" 
imageFolderPathMatch="\\images\\icons\\.*?(png|gif)$" ... >
      <imageGroups>
          ...
          <!--add PNG images that live in images\icons to this group-->
          <add groupName="icons" filePathMatch="\\images\\icons\\.*?png$" />




          <!--add GIF images that live in images\icons to this second group-->
          <add groupName="icons" filePathMatch="\\images\\icons\\.*?gif$" />
      </imageGroups>
</cssSpriteGenerator>

imageFolderPathMatch

如果 processFolderImages 属性处于活动状态，那么此属性是必需的。它决定了读取哪些图像文件。

类型 默认值
字符串
（正则表达式）		none

示例

<cssSpriteGenerator imageFolderPathMatch="\\images\\img1" ... >
</cssSpriteGenerator>

有关文件夹图像功能的详细信息，请参阅 processFolderImages。

imageFolderPathMatch 属性是一个 正则表达式。 如果 processFolderImages 处于活动状态，那么该包会查找网站根目录及其子目录中所有 PNG、GIF 和 JPEG 文件的文件路径。路径与 imageFolderPathMatch 匹配的图像文件将被处理。

例如，要处理 images\img1 目录中的所有图像文件，可以使用：

<!--all images in images\img1-->
<cssSpriteGenerator imageFolderPathMatch="\\images\\img1\\" ... >
</cssSpriteGenerator>

（使用双反斜杠是因为反斜杠在正则表达式中是特殊字符，因此需要用另一个反斜杠进行转义）

如果您只想处理 images\img1 目录中的 PNG 文件，可以使用：

<!--all PNG images in images\img1-->
<cssSpriteGenerator imageFolderPathMatch="\\images\\img1\\.*?png$" ... >
</cssSpriteGenerator>

如果您想处理网站根目录及其子目录中的所有图像文件，请使用：

<!--all images in the site-->
<cssSpriteGenerator imageFolderPathMatch="\\" ... >
</cssSpriteGenerator>

如果您的网站将图像写入网站根目录或其子目录（例如，如果访问者可以上传图像），请确保这些图像存储在 imageFolderPathMatch 未匹配的目录中，否则它们可能会最终进入精灵图。这些精灵图会随着每个图像的添加而变大。

此外，如果您的网站频繁写入图像（例如，每 5 分钟一次以上），请考虑将这些图像存储在网站根目录之外。为了加快处理速度，该包会缓存根目录及其子目录的结构。每次将图像添加到根目录或其子目录时，都会删除该缓存条目以确保其不过时，这意味着该包必须重新构建该缓存条目。

精灵图生成

inlineSpriteStyles

确定显示在替换 img 标签的 div 标签所需的样式是内联的还是放在单独的 .css 文件中。

值 描述
false其他样式放在单独的 .css 文件中。
true
（默认）		其他样式是内联的。

示例

<cssSpriteGenerator inlineSpriteStyles="false" ... >
</cssSpriteGenerator>

在关于 精灵图工作原理的部分，您看到了替换 img 标签的 div 标签如何使用附加样式来显示精灵图的正确区域 - 使用 background、width、height 等。

如果您将 inlineSpriteStyles 保持为 true，则软件包会内联所有附加样式。这会为您生成类似这样的 div 标签：

<div style="width: 32px; height: 32px; background: url(/TestSite/___spritegen/2-0-0-90- ... -53.png) -200px -0px; display:inline-block;"></div>

但是，如果将 inlineSpriteStyles 设置为 false，则附加样式将放置在一个单独的 .css 文件中，该文件与精灵图图像位于同一目录中。生成的 div 标签将通过 CSS 类引用样式。这会为您生成类似这样的 div 标签：

<div class="c0___spritegen" >&nbsp;</div>

在这种情况下，请确保您的页面的 head 标签具有 runat="server"，以便软件包可以将 .css 文件的 link 标签添加到 head 部分。

<head runat="server">

设置 inlineSpriteStyles 为 false 的优点/缺点如下：

  • 使用单独的 .css 文件的优点是，下次加载页面时，该 .css 文件可能仍在浏览器缓存中 - 因此所有这些附加样式不必通过 Internet 加载。如果您的访问者倾向于长时间停留在您的网站上，一次访问多个页面，则此方法适用。
  • 使用单独的 .css 文件的缺点是，如果该文件不在浏览器缓存中，浏览器将需要加载另一个文件。另外，如果您的 Web 服务器使用 压缩，则附加的内联样式不会增加通过 Internet 传输的字节数，因为它们是高度可压缩的。

在某些情况下，通过将 inlineSpriteStyles 设置为 false，将附加 CSS 放在单独的 CSS 文件中可能是有意义的：

  • 您非常确定在多次访问时，单独的 CSS 文件将会在浏览器缓存中。
  • 您使用 cssImages 元素来处理 CSS 背景图像。在这种情况下，软件包始终会生成一个单独的 CSS 文件，其中包含覆盖现有 CSS 样式的样式，以使其与新精灵图一起工作。如果您现在将 inlineSpriteStyles 设置为 false，则 div 标签的附加 CSS 将与背景图像的 CSS 放入同一个 CSS 文件中，而不是一个单独的 CSS 文件。这意味着您通过删除内联样式来减小 .aspx 页面的大小，而无需加载额外的 CSS 文件。

generatedFolder

设置生成 .css 文件（如果有）和精灵图的存储文件夹。

类型 默认值
字符串___spritegen

示例

<cssSpriteGenerator generatedFolder="generated\sprites" ... >
</cssSpriteGenerator>

如果该文件夹不存在，将在网站的根文件夹中创建它。

您可以在此属性中包含一个或多个 \。在这种情况下，您将获得一个文件夹和一个或多个子文件夹。

classPostfix

用于确保生成的类名唯一的后缀。

类型 默认值
字符串___spritegen

示例

<cssSpriteGenerator classPostfix="___generated" ... >
</cssSpriteGenerator>

如果您将 inlineSpriteStyles 设置为 false，则软件包会生成一个 .css 文件，其中包含使 精灵图正常工作所需的附加 CSS。为了确保生成的 CSS 类的名称不会与您网站中的其他 CSS 类名称冲突，classPostfix 的内容将附加到生成的类名上。

如果您发现生成的 CSS 类名称与您网站中的其他 CSS 类名称冲突，则可以通过更改 classPostfix 来解决此问题。

图像组

您使用图像组来确定哪些图像将被处理以及如何处理。有关完整介绍，请参阅 快速入门部分。

您可以拥有多个图像组。当以下情况时，这很有用：

  • 您希望对特定图像组使用不同的后处理选项。 例如，您可能只想对给定大小以上的图像使用 jpegQuality。
  • 您希望使您的精灵图更易于缓存，方法是使精灵图在所有页面或一组页面之间共享。这样，软件包就可以轻松地为不同的页面重用精灵图。

每个组可以具有以下属性：

图像过滤

这些属性决定了哪些图像进入哪个图像组。

精灵图生成

这些属性影响精灵图的生成方式，例如它们的图像类型。

图像处理

这些属性允许您处理组中的单个图像。

组创建

这些属性有助于管理您的图像组。

图像过滤

maxSize

设置此组中图像的最大大小（以字节为单位）。文件大小大于此值的图像将不会添加到此组。

类型 默认值
Int32 无大小限制

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add maxSize="2000" ... />
      </imageGroups>
</cssSpriteGenerator>

如果您在 img 标签中使用与图像的物理宽度和/或高度不同的 width 和/或 height 属性，请继续阅读。否则，您可以 跳过本节的其余部分。

如果您使用的 width 和/或 height 属性与图像的物理宽度和/或高度不同，软件包将在将图像添加到精灵图之前在内存中（而不是在磁盘上）自动调整其大小，除非 disableAutoResize 属性为 true （有关此功能的更多详细信息）。

因此，软件包将估计调整大小后的图像的大小（以字节为单位），以便确定是否将其添加到组中。考虑这种情况：

物理宽度 物理高度 物理大小
物理图像 100px 200px 3000 字节

如果您为一组设置 maxSize 为 2000，那么通常此图像不会被添加，因为其文件大小太大。

现在，如果您使用此图像和此标签：

<img src="..." width="100" height="100" />

页面上显示的图像现在将具有物理图像一半的高度。软件包然后会非常粗略地估计如果图像被物理调整为给定的width和height，它会有多大的文件大小。 

在这种情况下，图像的面积（宽度 x 高度）减半，因此软件包将图像的物理大小除以 2：

精灵图中的宽度 精灵图中的高度 估计大小
精灵图中的图像 100px 100px 1500 字节

由于估计大小现在只有 1500 字节，它将被添加到 maxSize 设置为 2000 的组中。

这里还有最后一个细节是，图像进入精灵图的大小不仅可以通过 img 标签上的 width 和 height 属性来设置，还可以通过图像组的 resizeWidth 和 resizeHeight 属性来设置。但是，这些属性仅在图像被添加到组之后才应用，因此它们不用于确定是否将图像添加到组本身。

maxWidth

设置此组中图像的最大宽度（以像素为单位）。宽度大于此值的图像将不会添加到此组。

类型 默认值
Int32 无宽度限制

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add maxWidth="50" ... />
      </imageGroups>
</cssSpriteGenerator>

如果您在 img 标签中使用了 width 属性，那么该宽度将用于决定图像是否宽度不过大，而不是图像的物理宽度（前提是您未将 disableAutoResize 设置为 true）。

例如，如果一个组的 maxWidth 是 50，那么一个宽度为 60 像素的图像通常不会包含在该组中。但是，如果您有以下图像标签，width 属性将被使用，并且该图像将被包含：

<img src="width60px.png" width="50" />

此功能不是鼓励您使用与实际图像尺寸不符的 width 或 height 属性。但如果您这样做了，软件包将按此方式处理。

maxHeight

设置此组中图像的最大高度（以像素为单位）。高度大于此值的图像将不会添加到此组。

类型 默认值
Int32 无高度限制

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add maxHeight="50" ... />
      </imageGroups>
</cssSpriteGenerator>

与 maxWidth 类似，如果您在 img 标签中使用了 height 属性，那么该高度将用于决定图像是否高度不过大，而不是图像的物理高度（前提是您未将 disableAutoResize 设置为 true）。

maxPixelFormat

设置此组中图像的最大每像素位数。每像素位数超过此值的图像将不会添加到此组。JPEG 图像也不会添加到此组，无论 maxPixelFormat 的值如何。 

类型 默认值
PixelFormat 无限制

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add maxPixelFormat="Format8bppIndexed" ... />
      </imageGroups>
</cssSpriteGenerator>

filePathMatch

这是一个正则表达式（教程）。 如果设置了此项，则文件路径不匹配此项的图像将不会包含在该组中。

类型 默认值
字符串
（正则表达式）		 empty
（无限制）

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <!--only include GIF and PNG images in the group-->
          <add filePathMatch="(png|gif)$" ... />
      </imageGroups>
</cssSpriteGenerator>

请注意，filePathMatch 匹配的是 Web 服务器上图像的文件路径，而不是您网站上图像的 url。要仅包含 icons 目录中的图像，请将 filePathMatch 设置为 \\icons\\，而不是 /icons/。您需要双反斜杠（\\），因为反斜杠在正则表达式中是特殊字符，因此需要用另一个反斜杠转义。

pageUrlMatch

这是一个 正则表达式。如果设置了此项，则只有当当前页面的 url 与此匹配时，该组才会被使用。 如果当前页面的 url 不匹配 pageUrlMatch，则软件包会像该组不存在一样行事。

类型 默认值
字符串
（正则表达式）		 empty
（无限制）

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <!--do not use this group if the current page has "/excludeme/" in its url-->
          <add pageUrlMatch="^((?!/excludeme/).)*$" ... />
      </imageGroups>
</cssSpriteGenerator>

请注意，filePathMatch 匹配的是图像的文件路径，而 pageUrlMatch 匹配的是当前页面的绝对url。要仅将图像组用于 special 目录中的页面，请将 pageUrlMatch 设置为 /special/，而不是 \\special\\。 

上面的示例展示了如何确保图像组用于所有页面，除了特定目录中的页面。如您所见，在正则表达式中实现这一点有点棘手（详情）。

下载中 DemoSite_Gallery 演示网站展示了 pageUrlMatch 如何用于仅在主页上调整图像大小，而在所有其他页面上保持其大小不变。

精灵图生成

maxSpriteSize

设置精灵图的最大大小（以字节为单位）。

类型 默认值
Int32 30000

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add maxSpriteSize="10000" ... />
      </imageGroups>
</cssSpriteGenerator>

如果您需要将大量图像放入精灵图中，最好将其分布在多个大小适中的精灵图中，而不是一个非常大的精灵图。这允许浏览器 并行加载精灵图。

为了实现这一点，您可以设置 maxSpriteSize。在将图像添加到精灵图时，软件包会跟踪添加到其中的所有图像的总文件大小。如果超过 maxSpriteSize，它会写入精灵图并开始一个新的。因此，一个组可能会生成多个精灵图。

请注意，软件包不会尝试计算精灵图写入磁盘后的实际大小 - 这将消耗大量 CPU 周期。它只是将放入精灵图的图像文件大小相加。

您可能已通过 resizeWidth 和 resizeHeight 属性，或通过 img 标签上的 width 和/或 height 属性调整了一个或多个图像的大小。在这种情况下，软件包会估计调整大小后的图像的文件大小，并使用该大小来计算精灵图的当前大小。

samePixelFormat

指定精灵图中的所有图像是否具有相同的像素格式。

类型 默认值
bool true

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add samePixelFormat="false" ... />
      </imageGroups>
</cssSpriteGenerator>

如果此属性为 true，则在合并到精灵图时，图像将按像素格式进行分类。因此，每像素 4 位的图像将进入一个每像素 4 位的精灵图，每像素 8 位的图像将进入一个每像素 8 位的精灵图，依此类推。JPEG 图像将进入一个单独的精灵图。

将 samePixelFormat 设置为 true 会产生更多精灵图，因此更多请求/响应开销，但传输的字节数也少得多。假设您的页面上有多个每像素 4 位的 PNG 图像和一个每像素 8 位的 PNG 图像。如果它们都进入单个精灵图，那么该精灵图将具有每像素 8 位以适应每像素 8 位的图像。但这还意味着原始的每像素 4 位的图像现在也占用每像素 8 位。结果通常是精灵图比各个图像的总大小还要大。

如果您更看重的是将精灵图的数量降至最低，而不是最小化精灵图的大小，请将 samePixelFormat 设置为 false。 但是，当 PNG（通常每像素 8 位）和 JPEG 图像（每像素 24 位）合并时，这可能会导致精灵图大小膨胀。

您可以通过使用 sameImageType 按图像类型对图像进行分类来避免这种情况。这样，每像素 4 位的 PNG 和每像素 8 位的 PNG 可以合并到一个精灵图中，但 JPEG 图像会进入自己的精灵图。

sameImageType

指定精灵图中的所有图像是否具有相同的图像类型（GIF、PNG 或 JPEG）。

类型 默认值
bool false

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add sameImageType="true" ... />
      </imageGroups>
</cssSpriteGenerator>

如果此属性为 true，则在合并到精灵图时，图像将按图像类型进行分类。因此，PNG 图像将进入 PNG 精灵图，JPEG 图像进入 JPEG 精灵图，GIF 图像进入 GIF 精灵图（假设您未设置 spriteImageType）。

另请参阅 samePixelFormat。

spriteImageType

设置精灵图的图像类型。

值 描述
Png
（默认，但见下文）		精灵图将以 PNG 文件格式写入磁盘。推荐用于包含简单图标、绘图等的精灵图。
Gif精灵图将以 GIF 文件格式写入磁盘。此选项包含在内是为了完整性。PNG 图像通常比 GIF 图像更有效，因此如果可能，请使用 Png。
Jpg精灵图将以 JPEG 文件格式写入磁盘。推荐用于包含压缩照片等的精灵图。

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add spriteImageType="Jpg" ... />
      </imageGroups>
</cssSpriteGenerator>

软件包按以下方式确定精灵图使用的图像类型：

  1. 如果设置了 spriteImageType，则使用该图像类型。
  2. 否则，如果构成精灵图的所有图像都具有相同的图像类型，则使用该图像类型。另请参阅 sameImageType。
  3. 否则，将使用 PNG 作为图像类型。

giveOwnSprite

允许您为组中的所有图像提供自己的精灵图。

值 描述
false
（默认）		组中的图像合并到精灵图中。
true每个图像组成自己的精灵图，而不是将图像合并到精灵图中。

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add giveOwnSprite="true" ... />
      </imageGroups>
</cssSpriteGenerator>

将图像合并到精灵图中的原因是减少浏览器加载每个单独图像的请求/响应开销。但是，对于较大的图像，请求/响应开销并不显著，因此通常不应将它们合并到精灵图中。否则，您可能会得到加载速度很慢的非常大的精灵图。

另一方面，该包允许您使用精灵图执行各种有用的操作，例如压缩 JPEG 精灵图或调整图像大小以即时创建缩略图。能够与更大的图像一起使用这些功能将是很好的。

解决方案是将较大的图像添加到组中，并将 giveOwnSprite 设置为 true。这样，组中的图像将各自拥有自己的精灵图，因此它们不会与其他图像合并。然后，您可以使用 jpegQuality 或 pixelFormat 来压缩生成的精灵图，并/或使用 resizeWidth 和 resizeHeight 来调整它们的大小 - 而不会得到巨大的精灵图。

当您查看软件包生成的 HTML 时，您会发现它为仅包含一个图像的精灵图生成了普通的 img 标签。这是因为这样的精灵图本质上是一个普通图像，因此不需要附加 CSS。

下载解决方案中的 DemoSite_CompressedJpeg 演示网站使用 giveOwnSprite 属性来阻止将大图像合并到精灵图中。

图像处理

resizeWidth

允许您设置组中所有图像的宽度。另请参阅 resizeHeight。

类型 默认值
Int32 不调整大小

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add resizeWidth="50" ... />
      </imageGroups>
</cssSpriteGenerator>

resizeWidth 可用于即时创建缩略图，因此您不必自己制作。

以“thumbnails.aspx”页面为例，您想显示更大图像的缩略图。您希望每个缩略图的宽度为 50px。通常，您需要创建单独的缩略图图像 - 但使用 resizeWidth，您可以简单地使用引用全尺寸图像的图像标签：

<!--thumbnails.aspx-->
<img src="bigimage1.jpg" />
<img src="bigimage2.jpg" />
<img src="bigimage3.jpg" />
<img src="bigimage4.jpg" />

要即时调整大图像的大小，使其宽度仅为 50 像素，请确保 JPEG 图像包含在一个组中。对于该组，将 resizeWidth 设置为 50。并确保该组仅用于缩略图页面 thumbnail.aspx：

<cssSpriteGenerator ... >
      <imageGroups>
          <add filePathMatch="\.jpg" resizeWidth="50" pageUrlMatch="thumbnails\.aspx$" ... />
      </imageGroups>
</cssSpriteGenerator>

请注意，图像在添加到精灵图之前会被物理调整大小，因此您将获得一个更小的图像和带宽节省。但是，您的原始图像文件不会被更改 - 所有操作都在内存中进行。

如果更方便，您还可以通过在图像标签中添加 width 属性（详情）来实现相同的小尺寸和相同的带宽节省，而无需使用 resizeWidth。

<!--thumbnails.aspx-->
<img src="bigimage1.jpg" width="50" />
<img src="bigimage2.jpg" width="50" />
<img src="bigimage3.jpg" width="50" />
<img src="bigimage4.jpg" width="50" />

resizeHeight

允许您设置组中所有图像的高度。另请参阅 resizeWidth。

类型 默认值
Int32 不调整大小

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add resizeHeight="100" ... />
      </imageGroups>
</cssSpriteGenerator>

您可以使用此属性以给定的高度即时生成缩略图，这与使用 resizeWidth 生成给定宽度的缩略图的方式完全相同。

您可以组合 resizeHeight 和 resizeWidth。如果您只使用一个，那么软件包将调整另一个尺寸，以便图像保持相同的宽高比。因此，如果您将高度减半（例如从 200px 到 100px），它也会将宽度减半。如果您同时设置两者，它将简单地同时使用它们。例如：

原始图像 组 结果图像
宽度高度resizeWidthresizeHeight宽度高度
100200未设置未设置100200
10020050未设置50100
100200未设置201020
10020050205020

请注意，如果您同时设置 resizeWidth 和 resizeHeight，您很容易改变图像的宽高比，这可能看起来不好。

jpegQuality

仅当通过此组生成的精灵图是 JPEG 图像时才有效。在这种情况下，此设置允许您降低精灵图的图像质量，从而降低文件大小。

类型 默认值
Int32（介于 0 和 100 之间） 无压缩

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add jpegQuality="70" ... />
      </imageGroups>
</cssSpriteGenerator>

jpegQuality 是精灵图质量的百分比，就像您没有指定 jpegQuality 一样。例如，如果您将 jpegQuality 设置为 70，那么精灵图的质量将降低到其“自然”质量的 70%。这可以大大减小精灵图的文件大小。

jpegQuality 的最佳设置取决于精灵图 - 您需要通过实验来确定。 设置高于 90 的质量可能会导致文件大小更大。通常，50 到 70 之间的值可以在不引起人类明显察觉的情况下，有效减小尺寸。

jpegQuality 的最佳用途可能是减小照片的文件大小。数码相机生成的图像文件通常非常大，并且可以在不明显损失质量的情况下轻松压缩。

要有效地压缩大型 JPEG 图像，您将使用这些属性：

  1. 您可能决定不将这些大图像合并到精灵图中，因为生成的精灵图会非常大（尽管您肯定可以这样做）。要实现这一点，您需要将 giveOwnSprite 设置为 true。
  2. 您想将 filePathMatch 设置为“jpg$”，以便该组仅拾取 JPEG 图像。因为这是一个 正则表达式，所以您也可以使用它来仅选择特定目录中的图像。
  3. 最后，将 spriteImageType 设置为“Jpg”。否则，图像将被转换为 PNG 图像，这对于照片来说不是最佳选择。

这将产生类似这样的结果：

<cssSpriteGenerator ... >
      <imageGroups>
          <add jpegQuality="70" giveOwnSprite="true" filePathMatch="jpg$" 
          spriteImageType="Jpg" ... />
      </imageGroups>
</cssSpriteGenerator>

假设您想将小型 JPEG 图像与小型 PNG 和 GIF 图像合并到精灵图中，同时压缩大型 JPEG 图像？您可以通过利用软件包优先匹配组的事实来实现这一点：

<cssSpriteGenerator ... >
      <imageGroups>
          <!--matches all images that are 200px by 300px or smaller-->
          <add maxWidth="200" maxHeight="300"/>




          <!--matches all remaining JPEG images. 
          These images will be bigger than 200px by 300px otherwise they would have 
          matched the preceding group.-->
          <add jpegQuality="70" giveOwnSprite="true" 
          filePathMatch="jpg$" spriteImageType="Jpg" ... />
      </imageGroups>
</cssSpriteGenerator>

下载解决方案中的 DemoSite_CompressedJpeg 演示网站使用 jpegQuality 属性将大型 jpeg 文件的质量降低到 70%。

pixelFormat

仅当精灵图生成为 PNG 或 GIF 图像时才适用。设置精灵图的像素格式。

值颜色数量位 深度
（每像素 位数）		生成的像素格式
DontCare
（默认）		具有最高每像素位数的组成图像的像素格式。 组合每像素 16 位灰度图像与彩色图像时为 Format48bppRgb。
Format1bppIndexed21使用具有 2 种颜色的颜色表（黑白）。
Format4bppIndexed164使用具有 16 种颜色的颜色表。
Format8bppIndexed2568使用具有 256 种颜色的颜色表。
Format16bppGrayScale65,536
灰色阴影		16颜色信息指定 65536 种灰色阴影。
Format16bppRgb55532,76816红色、绿色和蓝色分量各占 5 位。剩余位未使用。
Format16bppRgb56565,53616红色分量占 5 位，绿色分量占 6 位，蓝色分量占 5 位。
Format16bppArgb155532,76816红色、绿色和蓝色分量各占 5 位，1 位是 alpha。
Format24bppRgb16,777,21624红色、绿色和蓝色分量各占 8 位。
Format32bppRgb16,777,21632红色、绿色和蓝色分量各占 8 位。剩余 8 位未使用。
Format32bppArgb4,294,967,29632Alpha、红色、绿色和蓝色分量各占 8 位。
Format32bppPArgb4,294,967,29632Alpha、红色、绿色和蓝色分量各占 8 位。根据 alpha 分量，红色、绿色和蓝色分量是预乘的。

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add pixelFormat="Format24bppRgb" ... />
      </imageGroups>
</cssSpriteGenerator>

PNG 和 GIF 格式的图像可以具有不同的像素格式。这有助于减小图像文件大小。例如，如果您在 Photoshop 中创建一个颜色深度不超过 16 色的 PNG 图像，您将赋予它不超过 16 色的颜色深度，从而得到一个每像素占用 4 位（Format4bppIndexed）的图像。 如果您使用了超过 16 色，您必须赋予它下一个更高的颜色深度 256 色，占用每像素 8 位（Format8bppIndexed）。 颜色深度越高，文件大小越大。

通常，软件包会生成具有正确像素格式的精灵图。但有时您想覆盖像素格式。

  • 如果进入精灵图的图像具有非常不同的颜色，您可能会得到一个颜色深度过低的精灵图 - 如果看起来不好，您就会发现。要解决此问题，您可以尝试使用每像素位数更多的像素格式，以获得更高的颜色深度。

  • 您可以尝试使用每像素位数更少的像素格式来减小精灵图的文件大小。当将 JPEG 图像合并到 PNG 精灵图时，这一点尤其有用。JPEG 图像使用每像素 24 位，因此生成的精灵图也将至少具有每像素 24 位。将一个每像素 8 位的 PNG 图像添加到这样的精灵图中意味着该图像现在占用每像素 24 位，因此，除非您更改像素格式，否则该精灵图可能比各个图像的总大小还要大。

    另请参阅 samePixelFormat 和 sameImageType。

下载解决方案中的 DemoSite_CompressedPng 演示网站使用 pixelFormat 来减小精灵图的颜色深度。

像素格式本身就是一个重要话题。在这里，我们将重点介绍：

查找图像的每像素位数

查找图像的位深度、尺寸等不需要图像编辑器，至少如果您使用 Windows 7 并且可能使用 Vista。

  1. 在 Windows 资源管理器中右键单击图像文件；
  2. 选择属性；
  3. 打开详细信息选项卡。

合并不同像素格式的图像

当软件包将多个图像合并到一个精灵图中时，这些图像可能具有不同的像素格式 - 一个图像可能使用 Format4bppIndexed，因为它有少于 16 种颜色，而另一个图像可能使用 Format8bppIndexed，因为它使用了超过 16 种颜色，依此类推。

为了确保组成图像在您的页面上看起来都很好，默认情况下，软件包会将精灵图的像素格式设置为具有最高像素格式的组成图像的像素格式 - 在上面的示例中，这将是 Format8bppIndexed。您可以通过设置 pixelFormat 来覆盖此设置。

合并具有相同位深但不同调色板的图像

当您在 Photoshop 或其他图像编辑程序中创建图像并为其指定 16 或 256 种颜色的颜色深度（分别对应像素格式 Format4bppIndexed 和 Format8bppIndexed）时，程序会在图像文件中创建一个颜色表，其中包含您在图像中使用的颜色。每个像素的 4 或 8 位然后形成颜色表中的索引。

这意味着具有大量红色阴影的图像将具有大量红色阴影的调色板。具有相同颜色深度但具有大量蓝色阴影的另一个图像将具有大量蓝色阴影的调色板。因此，即使它们的颜色深度相同，两个图像也会有完全不同的调色板。

为了应对这种情况，该软件包最初会创建一个像素格式为 Format32bppArgb（每像素 32 位）的精灵图图像，然后添加 组成图像。这样，即使这些图像的调色板差异很大，它们也会在初始精灵图中保留其颜色。

但是，为了减小精灵图的文件大小，该软件包 然后将精灵图的颜色深度降低到颜色最多的组成图像的颜色深度。如果颜色深度最高的图像使用 4 或 8 位，这意味着精灵图本身也将使用 4 或 8 位像素 - 这意味着它使用调色板。这里的挑战是找到一个适合整个精灵图的调色板，即使原始图像具有差异很大的调色板。

该软件包内置了许多巧妙的算法来生成精灵图调色板的颜色（您可以自己选择一个或让软件包为您选择）。 但是，如果组成图像的颜色差异很大，这可能效果不佳，您最终可能会在页面上看到看起来不正确的图像。在这种情况下，您可以强制软件包选择每像素位数更多的像素格式（例如 Format24bppRgb），以在牺牲更大精灵图的情况下保持图像质量。

因此，如果您有很多使用调色板（4 或 8 位像素）的图像，将颜色相似的图像分组是有意义的 - 将所有“红色”图像放入一个精灵图，所有“蓝色”图像放入另一个精灵图，依此类推。

这种情况不会出现在更高的颜色深度下，因为在这种情况下，图像不再具有调色板。如果您允许每像素 24 位或更高（像素格式 Format24bppRgb 或更高），则任何调色板将包含 16,777,216 种或更多颜色 - 这没有意义。因此，在这种情况下，每个 像素的位数直接表示颜色，而不是颜色表中的位置。

调整大小会改变像素格式

如果您使用 resizeWidth、 resizeHeight 或 自动调整大小，那么软件包必须即时调整图像大小。

问题在于，调整大小后的图像通常需要比原始图像更多的颜色，才能使其具有良好的颜色过渡。由于这是一个复杂的问题，需要大量的 CPU 周期来优化，因此软件包保持简单，生成至少每像素 24 位的调整大小后的图像（像素格式 Format24bppRgb），以适应 所有可能需要的颜色。

因此，由于至少一个组成图像现在具有每像素 24 位或更多，您最终得到的精灵图也将至少具有每像素 24 位或更多。但是，这可能比实际需要的要多。您可以将 pixelFormat 设置为较低的像素格式，例如 Format8bppIndexed，以查看这是否可以在保持可接受的图像质量的同时减小精灵图的文件大小。

将具有相似像素格式的图像分组

如果您有 9 个简单的图像，它们最多使用 16 种颜色（每像素 4 位就足够了），而第 10 个更丰富的图像 使用超过 16 种颜色（需要每像素 8 位或更多），您可能只想将这 9 个简单的图像分组。

这样，生成的雪碧图每个像素只需要 4 位。 如果您将第 10 张更具色彩的图像添加到组中，这将强制雪碧图具有每像素 8 位 - 这意味着 它会有更大的文件大小。

优化图像

您网站上的某些图像可能未优化 - 例如，具有比必要更高的颜色深度，或者虽然颜色很少却使用了 JPG 格式的图像。

如果您将这些未优化的图像合并到雪碧图中，雪碧图将最终具有比必要更高的像素格式，导致其文件大小更大。您可以通过将 pixelFormat 设置为较低的像素格式，而不是手动编辑每个图标，让软件包为您完成此操作。

基于调色板的像素格式不适用于某些类型的共享主机

正如您在本节中看到的，软件包最初以不使用调色板的像素格式创建雪碧图。然后，它可能会尝试将雪碧图转换为仅具有 4 或 8 位的像素格式，以减小其文件大小，这意味着它将拥有一个调色板。

问题在于，计算调色板的算法使用低级代码来访问雪碧图中的所有颜色，以便能够计算出最佳调色板。这需要低级代码才能使其足够快。 

但是，只有当您的网站在具有 信任级别完全的环境中运行时，才能运行此低级代码。

在您的开发环境或您自己的 Web 服务器上，这都不是问题 - 您始终拥有完全的信任级别。即使您的网站与其他网站共享 Web 服务器，许多廉价共享主机计划也能让您获得完全的信任级别，并且也能正常工作。

但是，某些共享主机计划，例如 GoDaddy，为了确保共享 Web 服务器的网站之间互不影响，只提供给您的网站中等的信任级别。这会阻止软件包使用低级代码来计算调色板。

因此，如果您的网站在中等信任级别的账户中运行，它将不会将雪碧图转换为任何需要调色板的像素格式（Format1bppIndexed、Format4bppIndexed 或 Format8bppIndexed），即使您通过设置 pixelFormat 来指示它这样做。相反，它将使用Format24bppRgb，它不使用调色板。

paletteAlgorithm

当软件包生成使用调色板的像素格式的雪碧图时，让您选择用于查找最佳调色板的算法。

算法
Windows 使用标准 Windows 颜色的调色板。速度非常快。最适合仅使用 安全颜色的图像。当目标像素格式为Format1bppIndexed（每像素 1 位）时，软件包始终使用此算法。
HSB较慢，对具有大量颜色的图像有出色的效果
MedianCut较慢，通常效果不错
Octree快速，效果尚可
Popularity速度非常快，但对具有大量颜色的图像效果较差
Uniform速度非常快，但对具有大量颜色的图像效果较差。仅在目标为每像素 8 位（Format8bppIndexed）时有效。 对于每像素 4 位，软件包将使用 HSB 而不是 Uniform

有关这些算法的更多信息，请 在此处。

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add paletteAlgorithm="Windows" ... />
      </imageGroups>
</cssSpriteGenerator>

有关从该组生成的雪碧图的像素格式的详细信息，请参阅 pixelFormat。

假设您有一张包含 1000 种颜色的图像，并且您想减小颜色深度，使其每像素仅占用 8 位，以减小文件大小。每像素 8 位意味着您将使用仅包含 256 种颜色的调色板。您将选择哪 256 种颜色，以便新图像在人类眼中看起来仍然与原始图像相似？ 

这显然是一项棘手的任务，尤其是考虑到算法还需要最小化 CPU 使用率。人们提出了不同的算法来实现这一目标。问题在于，在某些情况下最佳的算法不一定在其他情况下也是最佳的。因此，该软件包允许您尝试不同的算法，而不是锁定您使用一种算法，以防默认算法不适合您。 

下载解决方案中的演示网站 DemoSite_CompressedPng 在减小雪碧图颜色深度时使用了 paletteAlgorithm。

disableAutoResize

允许您关闭自动调整大小功能（ 下方有描述）。

值 描述
false
（默认）		图像将根据 width 和 height 图像标签属性自动调整大小。
true自动调整大小已关闭。请勿与 giveOwnSprite="false" 结合使用。

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add disableAutoResize="true" ... />
      </imageGroups>
</cssSpriteGenerator>

如您所见，当软件包将图像转换为雪碧图时，它会用 div 标签替换 img 标签 - 其中 div 的宽度和高度与原始图像的宽度和高度匹配，因此它可以精确显示原始图像在雪碧图中所占的区域。

但是，您可能会有一个 img 标签，其 width 和/或 height 属性与物理图像的宽度和高度不对应。例如

<!--physical image width is 100px, but shown on page 50px wide-->
<img src="physically100wide.png" width="50" />

问题在于，您无法使用 CSS 标签调整背景图像的大小，就像使用 img 标签一样。为了解决这个问题，该软件包会在将图像添加到雪碧图之前对其进行物理大小调整 - 这是一项称为自动调整大小的功能。这发生在内存中 - 您的原始图像文件不会受到影响。它还确保 div 的宽度和高度与 img 标签的 width 和/或 height 属性指定的相匹配。

如果您仅在 img 标签中设置 width 属性，或仅设置 height 属性， 该软件包将保留图像的纵横比 - 因此它在页面上看起来仍然相同。

如果页面上有多个引用同一物理图像但具有不同 width 和/或 height 属性的 img 标签，那么该软件包会在将它们添加到雪碧图之前为每个宽度/高度生成版本。

自动调整大小仅适用于 img 标签上的 width 和/或 height 属性。 如果您在 CSS 中设置宽度或高度，则无效。

请记住，如果您在组中使用 resizeWidth 和/或 resizeHeight，它们将覆盖 img 标签上的任何 width 和/或 height 属性 - 因此自动调整大小功能此时不会生效。

下载解决方案中的 DemoSite_AutoResized 网站展示了自动调整大小的功能。

如果您愿意，可以通过将 disableAutoResize 设置为 true 来禁用自动调整大小功能。但是，如上所示，这在将图像合并到雪碧图时不起作用。因此，该软件包仅允许您在也将 giveOwnSprite 设置为 true 时执行此操作，因为在这种情况下，雪碧图可以显示为具有 width 和 height 属性的 img 标签，而不是作为背景图像。

如果您的页面显示同一物理图像多次，尺寸不同，那么禁用自动调整大小功能是有意义的。在这种情况下，您希望使用一个物理图像而不是多个调整大小的图像 - 因此浏览器只需要加载一个物理图像。

组创建

groupName

设置组的名称。您不能拥有两个同名的组（但可以拥有多个未命名的组）。

类型 默认值
字符串 空

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add groupName="largejpg" ... />
      </imageGroups>
</cssSpriteGenerator>

您将为组命名，原因如下：

  • 以便其他组可以使用 subsetOf 来引用它。
  • 为其命名，以便将来更容易记住该组的作用。

subsetOf

允许组继承其他组的属性。

类型 默认值
字符串 empty

示例

<cssSpriteGenerator ... >
      <imageGroups>
          <add subsetOf="basegroup" ... />
          <add groupName="basegroup" ... />
      </imageGroups>
</cssSpriteGenerator>

当您为组设置 subsetOf 为另一个组的名称时，该组将继承来自另一个组的所有属性 - 除了它自己设置的属性。

例如

<cssSpriteGenerator ... >
      <imageGroups>
          <add subsetOf="pnggroup" filePathMatch="\.jpg" />
          <add groupName="pnggroup" maxHeight="100" filePathMatch="\.png" />
      </imageGroups>
</cssSpriteGenerator>

最低的组将 maxHeight 设置为 100，将 filePathMatch 设置为 \.png。因此，它匹配不高于 100 像素的 PNG 文件。

它上面的组从 pnggroup 继承。它自己不设置 maxHeight，因此它从 pnggroup 继承。但是，它将 filePathMatch 设置为 \.jpg，从而覆盖了它从 pnggroup 获得的 filePathMatch。因此，它匹配不高于 100 像素的 JPEG 文件。

CSS 背景图像

该软件包能够将 CSS 背景图像合并到雪碧图中，进行压缩等。这非常有用，因为背景图像通常非常小，这意味着它们的请求/响应开销相对较高，因此将它们合并到雪碧图中可以带来很多好处。

cssImages 元素

虽然该软件包可以解释当前页面以查找那里使用的所有图像，但它还不能解释 CSS 文件。为了解决这个问题，该软件包允许您在 cssImages 元素中指定要处理的背景图像。

这是它的样子

<cssSpriteGenerator ... >
      <cssImages>
          <add imageUrl="css/img/logo.png" cssSelector=".backgrounglogo" ... />
          <add imageUrl="css/img/biglogo.png" cssSelector=".backgroungbiglogo" ... />
          ...
    </cssImages>
</cssSpriteGenerator>

如您所见，该软件包还需要背景图像使用的 CSS 选择器。 这是因为它可以生成其他 CSS 语句，部分覆盖原始 CSS，以确保背景图像在被放入雪碧图后仍然能在页面上正确显示。

在从 cssImages 元素读取图像后，它们将以与从页面读取的图像相同的方式进行处理。 这意味着某些背景图像可以与 img 标签中使用的图像合并。这也意味着它们需要先匹配到 图像组，然后才能放入雪碧图中。

例如，如果您想将两个“logo”背景图像放在它们自己的组中，您可以使用一个带有 filePathMatch 属性的组，如下所示

<cssSpriteGenerator ... >
      <cssImages>
          <add cssSelector=".backgrounglogo" imageUrl="css/img/logo.png" ... />
          <add cssSelector=".backgroungbiglogo" imageUrl="css/img/biglogo.png" ... />
          ...
    </cssImages>
    <imageGroups>
          <!--only include images ending in logo.png in the group-->
          <add filePathMatch="logo\.png$" ... />
    </imageGroups>
</cssSpriteGenerator>

除了 imageUrl 和 cssSelector 属性外， combineRestriction 属性还可以处理水平或垂直重复的背景图像，而 backgroundAlignment 属性可以处理与 sliding door 技术一起使用的背景图像。

imageUrl 属性的描述详细说明了如何根据 CSS 样式创建 cssImages 元素。

runat=server 在 head 标签中

如果您使用 cssImages 元素来处理 CSS 背景图像， 该软件包将始终生成一个单独的 .css 文件来覆盖现有的 CSS 样式，使其与新的雪碧图一起工作。

因此，该软件包可以 在 head 部分添加 .css 文件的 link 标签，并确保您的页面的 head 标签具有 runat="server"

<head runat="server">

属性索引

cssImages 元素具有以下属性：

imageUrl (必需)

要处理的背景图像的 URL。 这可以是绝对 URL，也可以是相对于网站根目录的 URL - 但不能是相对于 CSS 文件目录的 URL。

类型 默认值
字符串none

示例

<cssSpriteGenerator ... >
      <cssImages>
          <add imageUrl="css/img/logo.png" ... />
    </cssImages>
</cssSpriteGenerator>

例如，假设您在 css 目录中有一个 CSS 文件 site.css，其中包含以下 CSS：

.backgrounglogo 
{
    height: 32px; width: 32px;
    background: #000000 url(img/logo.png);
}

要将 logo.png 图像合并到雪碧图中，您需要执行以下步骤：

  1. 在 cssImages 中创建一个新条目
    <cssImages>
    ...
    <add />
</cssImages>
  2. 添加 CSS 选择器 .backgrounglogo
    <cssImages>
    <add cssSelector=".backgrounglogo" />
</cssImages>

    如果您有多个选择器使用相同的背景图像，则需要为每个选择器创建一个条目。

  3. 添加背景图像的 URL。 

    此处图像 URL - img/logo.png - 相对于 CSS 文件目录，即 css。但是，软件包不知道 CSS 文件所在的位置，因此它需要相对于网站根目录的图像 URL -  css/img/logo.png

    <cssImages>
    <add cssSelector=".backgrounglogo" imageUrl="css/img/logo.png" />
</cssImages>
  4. 如果样式使用重复的背景图像，或者您使用了 sliding door 技术， 您可能需要添加 combineRestriction 和 backgroundAlignment 属性 - 有关更多详细信息，请参阅它们的描述。

  5. 最后，确保有一个 图像组与背景图像匹配，否则它将不会被合并到雪碧图中。如果还没有这样的组，请添加一个。
    <imageGroups>
    <add ... />
</imageGroups>
<cssImages>
    <add cssSelector=".backgrounglogo" imageUrl="css/img/logo.png" />
</cssImages>

cssSelector (必需)

使用背景图像的样式的选择器。

类型 默认值
字符串none

示例

<cssSpriteGenerator ... >
      <cssImages>
          <add cssSelector=".backgrounglogo" ... />
    </cssImages>
</cssSpriteGenerator>

请参阅 imageUrl 属性的讨论。

combineRestriction (可选)

设置背景图像与其他图像在雪碧图中合并方式的限制。

值 描述
无
（默认）		无合并限制
仅水平图像将仅水平合并，且仅与相同高度的图像合并。 用于 repeat-y 样式。
仅垂直图像将仅垂直合并，且仅与相同宽度的图像合并。 用于 repeat-x 样式。

示例

<cssSpriteGenerator ... >
      <cssImages>
          <add combineRestriction="VerticalOnly" ... />
    </cssImages>
</cssSpriteGenerator>

是否使用合并限制取决于您是否使用重复的背景图像

使用示例使用 combineRestriction
repeat-xbackground: url(bg.png) repeat-x仅垂直
repeat-ybackground: url(bg.png) repeat-y仅水平

垂直重复背景图像的示例

要了解其工作原理，请查看此屏幕截图

这使用了以下 HTML：

<table cellpadding="10"><tr>
<td><div class="hor-gradient-lightblue">B<br />l<br />u<br />e</div></td>
<td><div class="hor-gradient-red">R<br />e<br />d</div></td>
</tr></table>

以及这个 CSS：

.hor-gradient-lightblue
{
    width: 10px;
    background: #ffffff url(img/gradient-hor-lightblue-w10h1.png) repeat-y;
}




.hor-gradient-red
{
    width: 10px; 
    background: #ffffff url(img/gradient-hor-red-w10h1.png) repeat-y;
}

以及这些背景图像，它们都具有 10 像素的宽度 - 与 div 的宽度相同

gradient-hor-lightblue-w10h1.png
(放大 8 倍)		 gradient-hor-red-w10h1.png
(放大 8 倍)

因为每个背景图像都很小，所以将它们合并到雪碧图中非常合适，这样浏览器只需要加载一个图像而不是两个。但是，您不希望像这样将图像堆叠在一起的雪碧图

垂直堆叠图像的雪碧图
(放大 8 倍)

因为这会产生不那么理想的结果

现在两个背景图像都显示在两个背景中！ 我们需要告诉软件包仅水平合并这些背景图像。这可以通过 combineRestriction 属性来完成

<cssImages>
    ...
    <add ... combineRestriction="HorizontalOnly"/>
    ...
</cssImages>

水平合并背景图像会得到这个雪碧图

水平合并图像的雪碧图
(放大 8 倍)

这使得软件包能够生成 CSS，将雪碧图移到可见区域

正确的雪碧图区域
移到可见区域
(放大 4 倍)

总而言之，您将为这两个背景图像在 cssImages 中使用这些条目：

<cssImages>
    ...
    <add imageUrl="css/img/gradient-hor-lightblue-w10h1.png" 
            cssSelector=".hor-gradient-lightblue" 
            combineRestriction="HorizontalOnly"/>
    <add imageUrl="css/img/gradient-hor-red-w10h1.png" 
            cssSelector=".hor-gradient-red" 
            combineRestriction="HorizontalOnly"/>
</cssImages>

水平重复的背景图像

对于水平重复而不是垂直重复的背景图像，故事是相同的，只是您会将 combineRestriction 设置为 VerticalOnly，这样可以确保图像在雪碧图中垂直堆叠。

雪碧图和狭窄的背景图像

到目前为止，背景图像的宽度与父 div 元素完全相同。如果我们使背景图像变窄，例如 5 像素，而 div 仍然是 10 像素宽，会发生什么？

没有雪碧图，浏览器将显示：

但是，如果我们把两个 5 像素宽的背景图像合并到一个雪碧图中

水平合并的 5 像素宽图像的雪碧图
(10 像素宽，放大 8 倍)

然后，如果我们使用该雪碧图作为背景图像，结果如下：

红色背景看起来不错，但蓝色背景似乎与红色背景合并了！ 当您考虑 CSS 雪碧图技术的工作原理时，原因就很明显了 - 雪碧图会移到 div 元素上，以便雪碧图中的正确图像可见。然后 div 的宽度和高度确保只有正确的图像可见。

然而，这对于蓝色背景图像在这里就失效了，因为我们想显示的背景图像是 5 像素宽，而 div 是 10 像素宽。结果，右侧的红色背景图像也会显示出来。它恰好对红色背景图像有效，但这只是因为这里的雪碧图向左移动了 5 像素，并且雪碧图的右侧没有图像。

这个故事的寓意是：如果背景图像比带有它的父 div 元素更矮、更窄，那么它就不能与其他图像合并到雪碧图中。

backgroundAlignment (可选)

确定软件包生成的 CSS 如何对齐背景图像。

值 描述
无
（默认）		图像将不被对齐
顶部图像将顶部对齐
底部图像将底部对齐
左侧图像将左侧对齐
右侧图像将右侧对齐

示例

<cssSpriteGenerator ... >
      <cssImages>
          <add backgroundAlignment="Left" ... />
    </cssImages>
</cssSpriteGenerator>

在您的 CSS 中，您可能像这样对齐背景图像：

background: url(img/button-green-left.png) left;

为了确保该软件包生成正确的雪碧图和 CSS 来处理对齐， 在以下情况下，您不仅需要为 cssImages 元素添加 combineRestriction 属性，还需要添加 backgroundAlignment 属性：

背景图像对齐示例 CSScombineRestrictionbackgroundAlignment
比父元素窄，但高度相同或更高左侧background: url(bg.png) left;仅垂直左侧
高度相同或更高右侧background: url(bg.png) right;仅垂直右侧
比父元素矮，但宽度相同或更宽顶部background: url(bg.png) top;仅水平顶部
宽度相同或更宽底部background: url(bg.png) bottom;仅水平底部

父元素例如是一个使用背景图像的 div 标签。请记住，如果背景图像比父元素更窄、更矮， 它就不能与其他图像合并到雪碧图中。

让我们来看一个实际例子。请看这个屏幕截图

两个按钮通常是绿色的。当您将鼠标悬停在一个按钮上时，它会变成橙色。

这是按钮的 HTML。请注意，两个按钮都使用了相同的 CSS 类 flexible-width-button，而不是为每个按钮使用一个图像 - 只有文本不同。 这使用了 sliding door 技术，它依赖于背景图像的对齐。

<table cellpadding="10"><tr><td>
<div class="flexible-width-button"><a href="delivery.aspx">Delivery</a></div>
</td><td>
<div class="flexible-width-button"><a href="buy.aspx">Buy</a></div>
</td></tr></table>

这是 flexible-width-button 的 CSS 类（一些无关部分已省略）。请注意，按钮的高度为 25 像素。

div.flexible-width-button {
    background: #ffffff url(img/button-green-left.png) top left no-repeat;
    ...
}




div.flexible-width-button a {
    background: transparent url(img/button-green-right.png) top right no-repeat;
    line-height: 25px;
    ...
}




div.flexible-width-button:hover, div.flexible-width-button:focus {
    background: #ffffff url(img/button-orange-left.png) top left no-repeat;
}




div.flexible-width-button:hover a, div.flexible-width-button:focus a {
    background: transparent url(img/button-orange-right.png) top right no-repeat;
}

CSS 使用了以下背景图像：

button-green-left.png button-green-right.png button-orange-left.png button-orange-right.png

所有四个图像的高度均为 25 像素，与它们的父元素高度相同。button-green-left.png 和 button-orange-left.png 也更宽，并且是左对齐的，因此根据 上面的表格，无需在它们的 cssImages 元素中添加 combineRestriction 和 backgroundAlignment。

<cssSpriteGenerator ... >
      <cssImages>
          ...
          <add imageUrl="css/img/button-green-left.png" 
               cssSelector="div.flexible-width-button" />
          <add imageUrl="css/img/button-orange-left.png"
               cssSelector="div.flexible-width-button:hover, div.flexible-width-button:focus" />
    </cssImages>
</cssSpriteGenerator>

对于 button-green-right.png 和 button-orange-right.png 来说情况不同：它们都比父元素窄，并且是右对齐的。根据 上面的表格，有两点理由需要在它们的 cssImages 元素中添加 combineRestriction 和 backgroundAlignment。

<cssSpriteGenerator ... >
      <cssImages>
          ...
          <add imageUrl="css/img/button-green-right.png" 
               cssSelector="div.flexible-width-button a" 
               combineRestriction="VerticalOnly" backgroundAlignment="Right" />
          <add imageUrl="css/img/button-orange-right.png" 
               cssSelector="div.flexible-width-button:hover a, div.flexible-width-button:focus a" 
               combineRestriction="VerticalOnly" backgroundAlignment="Right" />




          <add imageUrl="css/img/button-green-left.png" 
               cssSelector="div.flexible-width-button" />
          <add imageUrl="css/img/button-orange-left.png"
               cssSelector="div.flexible-width-button:hover, div.flexible-width-button:focus" />
    </cssImages>
</cssSpriteGenerator>

结论

从本文的篇幅可以看出，将图像合并到雪碧图中乍看起来很简单，但后来会变得更加复杂！

为什么不下载该软件包并尝试在您的网站上使用呢？ 我很想听听您的意见，如果您喜欢您看到的，请给我投票。

历史

版本 发布日期 描述
1.0 2011 年 8 月 3 日 初始发布。
1.1 2011 年 8 月 15 日 如果图像的文件大小大于组的 maxSpriteSize，则无论组的 maxSize 如何，它都不会被添加到该组中。
1.2 2012 年 6 月 10 日 添加了 samePixelFormat、 sameImageType 和 maxPixelFormat 属性。删除了 copiedImgAttributes 属性。现在，仅包含 JPEG 图像的雪碧图默认具有 JPEG 图像类型而不是 PNG。错误修复。
© . All rights reserved.