是否可以将背景位置添加到 img /asp:image 标签答案

【问题标题】：is it possible to add background position to img /asp:image tag是否可以将背景位置添加到 img /asp:image 标签
【发布时间】：2015-04-02 08:08:35
【问题描述】：

我正在优化页面加载

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

我有 18 个小图片要加载到主页中由于 base64 是实际图像大小的 1.3 倍，因此我使用图像精灵

精灵图像后，我可以用它来替换 background-image ， background-position 为 div，但我不能使用精灵图像来替换 img 和 asp:image 标签。我需要将它们设为<asp:image>，因为它附带了一些函数背后的代码

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

是的，您可以在图像上使用精灵，关键是在src 上添加高度/宽度和空/透明图像1pixel x 1pixel，以便可以加载某些内容并将某些内容显示为图像标签，因为没有有效的 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;
}

【讨论】：