Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

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

Готово.

Ответ 5

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

Ответ 6

Предполагая класс Css для "изображения":

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

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

Ответ 7

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