可以在img / asp：image标签中添加背景位置

Question

我正在努力优化页面加载

我选择的第一个选项是base64转换

我在主页上加载了18张小图片 由于base64是我用于图像精灵的实际图像尺寸的1.3倍

在对图像进行sprite之后，我可以使用它来替换div background-image，background-position，但我无法使用sprited图像替换img和{{1标签。我需要将它们设为asp:image，因为附加功能背后有一些代码

Answer 1

是的，您可以在图像上使用精灵，关键点是在1pixel x 1pixel上添加高度/宽度和空/透明图像src，因此可以加载某些内容并将某些内容显示为图像标记，因为没有有效的src浏览器可能会显示错误img，或者没有

渲染结果可以是：

<img class="rgoto" src="spacer.gif" height="9" width="8" >

和风格：

img.rgoto {
background: url(sprite.gif) no-repeat -230px -20px;
height: 9px;
width: 8px;
}

Answer 2

您可以为所有asp:Image控件添加透明图像。它们将呈现为HTML图像。然后你应该确保为每个都添加正确的css类和相应的sprite。

请参阅http://jsfiddle.net/9wo2mL32的示例。另外，请确保向类（或asp:Image控件）添加宽度和高度：

<asp:Image ID="imgImage" runat="server" Height="100" Width="100" ...