2

我有一个带有客户页面的 asp.net (vb) 网站。在该页面上，我们的一些大客户有超链接徽标。每个徽标的大小都相同（w 207 h 119）。有 3 列和 5 行图像，总共 15 个徽标。

目前，图像是这样编码的——但我想我需要删除 asp 图像并只使用常规图像：

<td>
<asp:HyperLink ID="HyperLink15" runat="server" ImageUrl="~/images/clgm.jpg" 
NavigateUrl="http://www.gm.com" Target="_blank"    
itemprop="url">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink16" runat="server" ImageUrl="~/images/clford.jpg" 
NavigateUrl="http://www.ford.com" Target="_blank" 
itemprop="url">HyperLink</asp:HyperLink>
</td>

依此类推，适用于所有 15 个客户。速度和性能会更好吗（如果我将这些图像拆分成一张图像，通过减少 http 请求？假设是这种情况，我应该将这些 asp:hyperlinks 和 asp:images 更改为常规的 html 链接和图像吗？然后如何我精灵他们？我不太擅长css，所以我真的很感谢任何人在这方面可以提供的任何帮助。

如果需要，下面是它们的样子——同样是 3 列和 5 行（这就是我更加困惑的地方）：

在此处输入图像描述

4

4 回答 4

2

速度和性能会更好吗（如果我将这些图像拆分成一张图像，可以减少 http 请求？

是的，这将是一个普遍的性能提升。一个加载的图像与十五个加载的图像是一个很大的整体 HTTP 请求节省。

假设是这种情况，我应该将这些 asp:hyperlinks 和 asp:images 更改为常规的 html 链接和图像吗？

那里的 ASP 代码是有原因的吗？它是否在开发/生产服务器之间转换 HTML？如果没有，我真的认为不需要处理一个简单的 HTML 链接，因此它将节省几毫秒的处理时间来将其转换为 HTML。

然后我将如何精灵它们？

CSS-Tricks.com 有一个很好的精灵教程。
A List Apart 也有一篇很好的 sprite 文章。

一般来说，你会做这样的事情：

  1. 给每个IMG标签一个 ID，例如id="logo-gm"
  2. 在 CSS 中，给每个精灵一个宽度/高度（这可以通过在容器级别应用来更容易）
  3. 为每个唯一 ID 提供精灵图像的背景和位置，以便出现正确的徽标。

您的 CSS 可能看起来像这样，但您的实际 CSS 需求将取决于您自己的网站设计：

.logo-sprites img { 
  width: 207px, 
  height: 119px; 
}
#logo-gm{ 
  background: url(/path/to/img/logo-sprite.png) no-repeat 0 0; 
}
#logo-ford{ 
  background: url(/path/to/img/logo-sprite.png) no-repeat -207px 0; 
}

您的 HTML 可能如下所示：

<ul class="logo-sprites">
    <li><img id="logo-gm" alt="GM Logo" /></li>
    <li><img id="logo-ford" alt="Ford Logo" /></li>
    ...
</ul>

对于背景 CSS：

background: url(/path/to/img/logo-sprite.png) no-repeat -207px 0;

表示-207px“x”值，减去宽度以将图像移动到下一个虚拟列。0表示 2D 平面的“y”值，减去高度以移动到下一行。从左上角开始是点 (0,0)。

我希望这会有所帮助！

于 2012-11-01T22:08:54.553 回答
2

是的，精灵很好。在我看来，拥有你的精灵图像是大部分工作。

您现在可以使用一点 css 访问您的精灵。有关工作示例，请参见此处。 http://jsfiddle.net/DWy2W/

<style>
.sponsor{
    width:80px;
    height:50px;
    background-image: url(http://i.stack.imgur.com/m93cd.jpg);
}
.gm{
    background-position: 0px 0px;
}
.ford{
    background-position: -80px 0px;
}
.osi{
    background-position: -80px -50px;
}​
</style>
<a href="http://www.ford.com">
    <div class="sponsor ford"></div>
</a>
<a href="http://www.gm.com">
    <div class="sponsor gm"></div>
</a>
<a href="http://www.osi.com">
    <div class="sponsor osi"></div>
</a>​
于 2012-11-01T22:18:23.417 回答
1

是的，减少http请求的数量绝对是个好主意。在您的情况下，如果您使用精灵，您基本上将 15 个 http 请求减少到 1 个。您不必为此使用任何图像标签，您可以使用一些 div 或 li 并使用 background-image css 属性来指定图像。所有元素都需要有不同的 css 类名，并且每个类都有特定的背景位置。检查这篇文章 http://css-tricks.com/css-sprites/

于 2012-11-01T22:03:50.093 回答
1

考虑到精灵的数量和图像的标准尺寸，精灵绝对有用。如其他答案所述，它肯定不会伤害您！

要生成精灵，有许多可用的在线选项，例如http://spritegen.website-performance.org/

在 VS.NET 中，您可以使用CssSpriteGenreator或Talifun.web.CssSprite NuGet

于 2012-11-01T22:26:01.947 回答