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 で修正できますが、この方法では代替テキストが失われます。これはSEOにとって重要だと思います。

4

3 に答える 3

1

これを試して：

最初の画像:

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

2 番目の画像:

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

3 番目の画像:

<div id="imgOperatorLogoContainer" style="width: 170px; height: 191px;
    background: url(Images/logo.png) -340px 0;">
</div>
于 2011-06-25T22:14:38.327 に答える
0

同じです...IMGコントロールは、＃セレクターを使用してjQueryを介して使用できるIDをレンダリングします。または、クラスをレンダリングして。を使用するCssClassを使用できます。セレクタ

于 2011-06-25T21:30:33.487 に答える
0

cssスプライトを調べてください。

まず第一に、あなたが言及している「以下」のコメントはどれですか？次に、タグのようにレンダリングしたい場合、なぜ背景画像のスタイルをその上に配置しようとするのでしょうか。そして、あなたは別のテキストを追加したいですか？上記で提案したスタイルのjqueryを使用してalt-textattrを使用して画像タグを生成するか、titleattrを追加することができます。または、（サイズを知っているように見えるので）伸びないようにしたい場合は、独自の幅と高さを追加します。どのように表示しますか？3つの別々の画像？DIVを使用せず、3つの画像のいずれかのサイズの1つのASP.Net画像コントロールに表示したいですか？なんでしょう？

于 2011-06-25T21:31:36.487 に答える