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

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 元素来完成这项工作 - > 但是 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 解决此问题 -> 但这样我们会丢失替代文本，我认为这对 SEO
提前致谢

Answer 1

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

Answer 2

看看css sprites..

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

Answer 3

试试这个：

第一张图片：

<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>