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

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

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

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

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

Источник

7 ответов

Решение

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

Источник

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

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

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

Источник

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

<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>
Источник

Я не знаю, понимаю ли я, в чем проблема. Вы можете добавить изображение в кнопку ASP, но это зависит от того, как оно настроено и правильно ли оно вписывается. регулярное добавление фоновых изображений в кнопки asp дает вам изящную кнопку или фоновое изображение с наложением текста, поскольку в нем отсутствует тег изображения. например, изображение с надписью "ОТПРАВИТЬ ЗАПРОС".

В качестве простого способа сделать это я использую файл "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, но это оставляет кнопку с текстом "отправить запрос" поверх него, так как для этого нужно изображение, поэтому замена его на предварительно загруженное изображение означает, что вы избавились от запроса и по-прежнему имеете изображение в css.

Готово.

Источник

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

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

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

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

Источник 
.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" />
Источник
Другие вопросы по тегам