Могу ли я добавить изображение к кнопке ASP.NET?

Question

Я хочу добавить изображение вместо кнопки по умолчанию.

У меня уже есть класс CSS для изображения, будет ли это работать?

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

Я пытаюсь сделать это сейчас, и изображение все искажено. Может быть, это проблема CSS?

Answer 1

Почему бы не использовать элемент управления ImageButton ?

Answer 2

Хотя вы можете «заменить» кнопку изображением, используя следующий CSS ...

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

... лучшее, что можно сделать здесь, это использовать элемент управления ImageButton, поскольку он позволит вам использовать альтернативный текст (для доступности).

Answer 3

Я на самом деле предпочитаю использовать элемент формы кнопки html и сделать его runat = server. Элемент кнопки может содержать другие элементы внутри него. Вы даже можете добавить форматирование внутри него с помощью span или strong. Вот пример:

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

Answer 4

Вы можете добавить изображение на кнопку 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"/>

Answer 5

Я не знаю, правильно ли я понимаю, в чем проблема. Вы можете добавить изображение в кнопку ASP, но это зависит от того, как оно настроено и правильно ли оно вписывается. регулярное добавление фоновых изображений в кнопки asp дает вам изящную кнопку или фоновое изображение с наложением текста, поскольку в нем отсутствует тег изображения. например, изображение с надписью «SUBMIT QUERY» поверх него.

В качестве простого способа сделать это я использую файл "blankspace.gif" на своем веб-сайте. Это пустой GIF-файл размером 1x1 пикселя, и я изменяю его размер, чтобы заменить изображение на веб-сайте.

так как я не использую CSS для замены изображения, я использую CSS Sprites для уменьшения количества запросов. Мой веб-сайт изначально был размером 150 КБ для домашней страницы и имел около 140-150 запросов на загрузку домашней страницы. Создавая спрайт, я убил запросы, сжавшие размер изображения до доли размера, и он отлично работает, и для любой области, где вам нужен файл изображения, чтобы правильно его масштабировать, просто используйте то же изображение blankspace.gif.

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

Если вы видите выше, класс загружает фоновое изображение в css, но это оставляет кнопку с текстом «submit Query» поверх нее, так как для этого требуется изображение, поэтому замена его на предварительно загруженное изображение означает, что вы избавились от запроса и до сих пор изображение в CSS.

Готово.

Answer 6

.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" />

Answer 7

Предполагается, что класс Css "image":

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

Если вы не знаете, что такое ширина и высота изображения, вы можете установить это динамически с помощью JavaScript.