Как поместить jpg или png изображение в кнопку в HTML

Ответ 1

Это должно быть

<input type="image" id="myimage" src="[...]" />

Итак, "образ" вместо "отправить". Он по-прежнему будет кнопкой, которая отправляется при нажатии.

Если ваше изображение больше отображаемой кнопки; скажем, изображение составляет 200x200 пикселей; добавьте это в таблицу стилей:

#myimage {
    height: 200px;
    width: 200px;
}

или непосредственно в теге кнопки:

<input type="image" id="myimage" style="height:200px;width:200px;" src="[...]" />

Обратите внимание, однако, что изменение размера изображения, подобного этому, может не дать идеальных результатов; если, например, ваше изображение намного меньше, чем вы хотите, чтобы оно отображалось, вы увидите одиночные пиксели; если, с другой стороны, это намного больше, вы тратите драгоценную пропускную способность своих пользователей. Таким образом, изменение размера изображения до фактического размера предпочтительнее перемасштабирования через таблицы стилей!

Ответ 2

Вы можете стилизовать кнопку с помощью CSS или использовать изображение. Кроме того, вы можете использовать элемент button, который поддерживает встроенный контент.

<button type="submit"><img src="/path/to/image" alt="Submit"></button>

Ответ 3

Используйте <button> элемент вместо <input type=button />

Ответ 4

Вы можете использовать некоторые встроенные CSS, такие как

<input type="submit" name="submit" style="background: url(images/stack.png); width:100px; height:25px;" />

Нужно делать магию, также вы можете сделать границу: none; чтобы избавиться от стандартных границ.

Ответ 5

вы также можете попробовать что-то вроде этого

<input type="button" value="text" name="text" onClick="{action}; return false" class="fwm_button">

и класс CSS

.fwm_button {
   color: white;
   font-weight: bold;
   background-color: #6699cc;
   border: 2px outset;
   border-top-color: #aaccff;
   border-left-color: #aaccff;
   border-right-color: #003366;
   border-bottom-color: #003366;
 }

Приведен пример здесь

Ответ 6

Это может сработать для вас, попробуйте и посмотрите, работает ли он:

<input type="image" src="/library/graphics/cecb2.gif">

Ответ 7

<input type= "image" id=" " onclick=" " src=" " />

он работает.

Ответ 8

<a href="#">
        <img src="p.png"></img>
    </a>