Question

我在asp.net中有一个图像组件，如下所示：

<div id="imgOperatorLogoContainer">
    <asp:Image ID="imgOperatorLogo" runat="server" ToolTip="bla bla"
                AlternateText="bla bla" ImageUrl="~/Images/c"
                Width="170px" Height="191px" />
</div>

如你所见，我为这张图片添加了宽度和高度，但通过这样做，face-images.jpg（3 * 170 = 510 * 191）在元素区域拉伸！
但是我不想要这个动作，因为face-images.jpg里面有3个图像（170 * 191），我想用css和jquery控制它们的位置！
我知道我们可以通过div元素完成这项工作 - ＆gt;但是asp.net的图像组件呢？渲染后的图像如下（html）：

<img style="height: 191px; width: 170px;" alt="bla bla" src="Images/face-images.jpg" title="bla bla" id="imgOperatorLogo">

但为什么以下css不能用于此图像：

#imgOperatorLogo
{
  background-position: 0px 0px;
}

或

#imgOperatorLogo
{
  background-position: -170px 0px;
}

或

#imgOperatorLogo
{
  background-position: -340px 0px;
}

我们可以通过备用div解决此问题 - ＆gt;但是这样我们就失去了alt文本，我认为这对于 SEO 来说非常重要提前谢谢

Answer 1

试试这个：

第一张图片：

<div id="imgOperatorLogoContainer" style="width: 170px; height: 191px;
    background: url(Images/logo.png) 0 0;">
</div>

第二张图片：

<div id="imgOperatorLogoContainer" style="width: 170px; height: 191px;
    background: url(Images/logo.png) -170px 0;">
</div>

第三张图片：

<div id="imgOperatorLogoContainer" style="width: 170px; height: 191px;
    background: url(Images/logo.png) -340px 0;">
</div>

Answer 2

是一样的...... IMG控件使用#selector呈现可以通过jQuery使用的ID，或者可以使用呈现类并使用它的CssClass。选择

Answer 3

看一下css sprites ..

好的，首先，你指的是哪个评论？其次，当你想让它像标记一样呈现时，你为什么要尝试为它添加背景图像样式？你想添加替代文字吗？您可以使用带有alt-text attr的上面建议的样式的jquery生成图像标签，或者只添加标题attr。或者你想让它停止伸展（因为你似乎知道它的大小），只需添加你自己的宽度和高度......你想如何显示它？三个单独的图像？你不想使用DIV，你想在一个ASP.Net图像控件中显示它们，其大小是三个图像之一？你想要什么？

asp.net中的图像控件（<img/>元素） - ＆gt;内部图像定位帮助！

3 个答案: