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

Posted 2023-03-06

【中文标题】是否可以将背景位置添加到 img /asp:image 标签

【英文标题】：is it possible to add background position to img /asp:image tag

【发布时间】：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" ...

【讨论】：

如何拉伸背景图片？

@vignesh 您可以使用background-size css 属性。请参阅jsfiddle.net/9wo2mL32/1

处的更新示例

【参考方案2】：

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

渲染结果可以是这样的：

<img class="rgoto" src="spacer.gif"   >

和风格：

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

【讨论】：

如何拉伸背景图片？