web-dev-qa-db-fra.com

Incorporer une image dans un élément <button>

J'essaie d'afficher une image png sur un élément <button> en HTML . Le bouton a la même taille que l'image et l'image est affichée, mais pour une raison quelconque, pas au centre - il est donc impossible de tout voir . En d'autres termes, il semble que le coin supérieur droit de l'image se situe au centre du bouton et non dans le coin supérieur droit du bouton.

C'est le code HTML:

<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

Mettre à jour:
Je pense que ce qui se passe réellement est un problème de marge. J'obtiens une marge de deux pixels, de sorte que l'image d'arrière-plan disparaît du bouton. Le bouton et l'image ont la même taille, c'est-à-dire que 20px, donc c'est très visible ... J'ai essayé margin:0, padding:0, mais cela n'a pas aidé ...

htmlcssimagebutton
92
Amit Hagin

Vous pouvez utiliser le type d’entrée image.

<input type="image" src="http://example.com/path/to/image.png" />

Cela fonctionne comme un bouton et peut avoir les gestionnaires d'événements attachés.

Vous pouvez également utiliser css pour styler votre bouton avec une image d’arrière-plan et définir les bordures, marges, etc. de manière appropriée.

<button style="background: url(myimage.png)" ... />
128
Andrew Barber

Si l'image est une donnée sémantique (une image de profil, par exemple), utilisez un élément <img> dans votre <button> et utilisez CSS pour redimensionner le <img>. Si l'image constitue simplement un moyen de rendre un bouton attrayant, utilisez CSS background-image pour styliser le <button> (et n'utilisez pas de <img>).

Démo: http://jsfiddle.net/ThinkingStiff/V5Xqr/

HTML:

<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>

CSS: 

button {
    display: inline-block;
    height: 134px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 104px;
}

#close-image img {
    display: block;
    height: 130px;  
    width: 100px;
}

#close-CSS {
    background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
    background-size: 100px 130px;
    height: 134px;  
    width: 104px;
}

Sortie:

enter image description here

53
ThinkingStiff

essaye ça

   <input type="button" style="background-image:url('your_url')"/>
9
Chris P

Le moyen le plus simple de mettre une image dans un bouton:

<button onclick="myFunction()"><img src="your image name here.png"></button>

Cela redimensionnera automatiquement le bouton à la taille de l'image.

3
Eli Davies

Pourquoi n'utilisez-vous pas une image avec un attribut onclick?

Par exemple:

<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>
0
SirFireball

Ajouter un nouveau dossier avec le nom des images dans votre projet. Placez des images dans le dossier Images. Ensuite, cela fonctionnera bien.

<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">
0
Parameswaran