0

我在 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 解决这个问题 - > 但是这样我们会丢失 alt 文本，我认为这对SEO
很重要 ，提前谢谢

4

3 回答 3

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>
于 2011-06-25T22:14:38.327 回答
0

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

于 2011-06-25T21:30:33.487 回答
0

看看css sprites..

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

于 2011-06-25T21:31:36.487 回答