web-dev-qa-db-fra.com

<bouton> image de fond

J'ai un petit problème avec la définition d'une image d'arrière-plan pour <button>.

Voici le code HTML que j'ai sur le site:

 <button id="rock" onClick="choose(1)">Rock</button>

Et voici le CSS:

button {
   font-size: 18px;
   border: 2px solid #AD235E;
   border-radius: 100px;
   width: 150px;
   height: 150px;
}

button #rock {
   background: url(img/rock.png) no-repeat;
}

Je ne sais pas pourquoi l'arrière-plan du bouton est toujours blanc.

htmlcssimage
19
Kyrbi

Étonnant que pas de réponse aborde ou mentionne le problème réel ici.

Le sélecteur CSS button #rock dit "donnez-moi un élément avec l'identifiant rockà l'intérieur a <button> element ", comme ceci:

<button>
    <span id="rock">This element is going to be affected.</span>
</button>

Mais ce que tu voulais, c'est un <button> element avec l'identifiant rock. Et le sélecteur pour cela serait button#rock (notez l’espace manquant entre le bouton et le # rock ).

Et comme @Greg l'a déjà mentionné: #rock est déjà suffisamment spécifique pour cibler le bouton et peut être utilisé seul.

20
maryisdead

Pour une raison quelconque, la largeur et la hauteur du bouton ont été réinitialisées. Vous devez également les spécifier dans le sélecteur d'identifiant:

#rock {
    width: 150px;
    height: 150px;
    background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
    background-repeat: no-repeat;
}

Cas de test en direct .

22
Shadow Wizard

Vous devez appeler le bouton CLASS in

<button class="tim" id="rock" onClick="choose(1)">Rock</button>



<style>
.tim{
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(images/Sun.jpg);
}
</style>
4
Tom

Remplace le bouton #rock par #rock

Pas besoin de portée de sélecteur supplémentaire. Vous utilisez un identifiant aussi précis que possible.

Exemple JsBin: http://jsbin.com/idobar/1/edit

1
Greg

Essayez de changer votre CSS à cette

button #rock {
    background: url('img/rock.png') no-repeat;
}

... à condition que l'image soit à cet endroit

1
Adam Brown

Supprimer le "bouton" avant # rock:

button #rock {
    background: url(img/rock.png) no-repeat;
}

Travaillé pour moi dans Google Chrome.

0
İsmet Alkan

Pour vous débarrasser de la couleur blanche, vous devez définir la couleur de fond sur transparente:

button {
  font-size: 18px;
  border: 2px solid #AD235E;
  border-radius: 100px;
  width: 150px;
  height: 150px;
  background-color: transparent; /* like this */
}
0
tourdefran