web-dev-qa-db-ja.com

ASP.NETボタンに画像を追加できますか？

デフォルトのボタンの代わりに画像を追加したい。

画像のCSSクラスは既にありますが、これは機能しますか？

<asp:Button ID="..." CssClass=""/>

私は今それを試しています、そして、イメージはすべてくしゃくしゃにされます。たぶんそれはCSSの問題ですか？

asp.netcssbutton
28
Blankman

ImageButton コントロールを使用しないのはなぜですか？

31
Tim S. Van Haren

次のCSSを使用して、ボタンを画像に「置き換える」ことができますが...

.className {
   background: url(http://sstatic.net/so/img/logo.png) no-repeat 0 0;
   border: 0;
   height: 61px;
   width: 250px
}

...ここで行うのに最適なのは、ImageButtonコントロールを使用することです（アクセシビリティのために）代替テキストを使用できるからです。

4
Josh Stodola

実際には、HTMLボタンフォーム要素を使用して、runat = serverにすることを好みます。ボタン要素は、その中に他の要素を保持できます。スパンまたはストロングを使用して、その中にフォーマットを追加することもできます。以下に例を示します。

<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>
3
Banzor

私は問題が何であるかをかなり理解しているかどうかわかりません。画像をASPボタンに追加できますが、適切に収まるかどうかの設定に依存します。ASPボタンに背景画像を入れると、危険な形のボタンまたは画像タグの上に "SUBMIT QUERY"が付いた画像など、画像タグがないため、テキストオーバーレイが付いた背景画像。

簡単な方法として、Webサイト全体で「blankspace.gif」ファイルを使用します。 1x1ピクセルの空のgifファイルで、Webサイト上の画像を置き換えるためにサイズを変更します。

cSSを使用して画像を置き換えないため、CSSスプライトを使用してクエリを減らします。私のウェブサイトはもともとホームページ用に150 kbでしたが、ホームページを読み込むための約140〜150件のリクエストがありました。スプライトを作成することで、リクエストを削除して画像サイズを数分の1のサイズに圧縮しました。完璧に機能し、適切にサイズを調整するために画像ファイルが必要な領域はすべて同じblankspace.gif画像を使用します。

<asp:ImageButton class="signup" ID="btn_newsletter" ImageUrl="~/xx/xx/blankspace.gif" Width="87px" Height="28px" runat="server" /

上記を見ると、クラスはcssに背景画像をロードしますが、画像を必要とするため、「submit Query」テキストが付いたボタンが残されます。したがって、プリロードされた画像に置き換えると、リクエストを削除してもまだCSSの画像。

できた.

1
Chris

Asp.netボタンに画像を追加できます。画像ボタンまたはリンクボタンのみを使用する必要はありません。ブラウザにボタンを表示するとき、デフォルトでhtmlボタンに変換しています。そのため、画像の追加に「スタイル」プロパティを使用できます。私の例を以下に示します。私はそれがあなたのために働くことを望みます。

Style="background-image:url('Image/1.png');"

を使用して画像の場所を変更できます

background-repeat

プロパティ。そのため、次のようなボタンを作成できます。

<asp:Button ID="btnLogin" runat="server" Text="Login" Style="background-image:url('Image/1.png'); background-repeat:no-repeat"/>
1
Mahmut EFE
.my_btn{ 
  font-family:Arial; 
  font-size:10pt; 
  font-weight:normal; 
  height:30px; 
  line-height:30px; 
  width:98px; 
  border:0px;
  background-image:url('../Images/menu_image.png'); 
  cursor:pointer;
}

<asp:Button ID="clickme" runat="server" Text="Click" CssClass="my_btn" />
0
user1758332

「イメージ」のCssクラスを想定：

input.image { 
  background: url(/i/bg.png) no-repeat top left; 
  width: /* img-width */; 
  height: /* img-height */ 
}

画像の幅と高さがわからない場合は、javascriptで動的に設定できます。

0
Armstrongest