Comment faire des boutons de taille égale à la taille de l'image d'arrière-plan en HTML?

J'ai le code suivant . Le problème est que je ne suis pas réussir à réaliser le bouton de la taille de l'image d'arrière-plan de la taille. La taille de l'image de fond est 60x60 pixels. Comment dois-je code?

  <tr>
                <td><button style="width: 60px; height: 60px;"><img src="darkSquare.jpg" /></button></td>
                <td><button style="width: 60px; height: 60px;"><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
            </tr>
            <tr>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
            </tr>

J'obtiens le résultat suivant-

Comment faire des boutons de taille égale à la taille de l'image d'arrière-plan en HTML?

OriginalL'auteur CodeBlue | 2012-02-22

  1. 2

    Essayer, dans le CSS, 

    button {
  background-image:url('www.example.com/image.jpg');
  width:50px; /* or whatever */
  height:30px; /* or whatever */
}

    Qui devrait le faire, pour tous les boutons.

    Merci pour cette. Il a travaillé! J'ai une autre question prochainement.
    Vous êtes les bienvenus. Le feu de suite!

    OriginalL'auteur ACarter

  2. 1

    Utiliser l'image comme arrière-plan du bouton. Faire la avec et la hauteur du bouton de même que la taille de l'image. SI la taille de l'image est 60X60 puis le CSS sera

    button {
display:block;
width:60px;
height:60px;
background: url(image.jpg) no-repeat top center;
}

    cela peut vous aider...

    OriginalL'auteur Asif

  3. 0

    Utiliser l'image comme le fond de CSS du bouton et de la taille du bouton en conséquence.

    Encore mieux: utiliser Une balise avec display:block et d'utiliser le fond de CSS.

    J'ai essayé ceci dans le CSS du bouton { background-size: 100% 100%; } Mais ça ne marche pas
    Vous avez besoin de la taille de l'élément en PIXELS en fonction de la taille de l'image. Non des pourcentages.

    OriginalL'auteur Diodeus - James MacFarlane

  4. 0

    Serait-il utile d'utiliser ce lieu:

    <input type='image' src='lightSquare.jpg'/>

    OriginalL'auteur Jon Onstott

  5. 0

    Essayer quelque chose comme cela:
    Ajouter une balise style:

    <style>
.darkSquare{
    background: url('darkSquare.jpg') no-repeat;
}
.lightSquare{
    background: url('lightSquare.jpg') no-repeat;
}
.btn{
    width:60px;
    height:60px;
    background:#FFF; 
    border:0;
}

</style>

    Changer votre code existant:

    <tr>
    <td><button class="btn darkSquare"/></td>
    <td><button class="btn lightSquare"/></td>
</tr>

    OriginalL'auteur jonycheung

  6. 0

    Rencontré ce problème récemment, et toutes les réponses a demandé à incorporer une image dans le bouton au lieu de l'original de la structure html.

    Ma solution est:

    html:

    <button style="width: 60px; height: 60px;">
  <img class="img-center" src="darkSquare.jpg" />
</button>

    css:

    .img-center {
  position: relative;  
  margin: auto;
}

    Aussi simple que cela! Cette réponse n'a pas besoin de vous pour changer votre structure html, en particulier pour ceux qui préfèrent cette structure.

    OriginalL'auteur ree gabriel