css background-position ne fonctionne pas

J'ai 3 tags déguisé en "roll over boutons".

<div id="buttons">
    <a class='button' id='but1' href=''></a>
    <a class='button' id='but2' href=''></a>
    <a class='button' id='but3' href=''></a>
</div>

Chaque bouton est de l'image initiale de la CSS comme suit:

.button{
    background:url(theimage.jpg);
    width;height; etc...
}

Maintenant, quand j'essaie d'attribuer de fond initiale de la position de chaque élément en tant que tel:

#but1{
    background-position:0 0;
}
#but1:hover{
    background-position:0 -50px;
}

#but2{
    background-position:0 -100px;
}
#but2:hover{
    background-position:0 -150px;
}

#but3{
    background-position:0 -200px;
}
#but3:hover{
    background-position:0 -250px;
}

La Question: chaque bouton par défaut à la position 0 0

Noter que hover postes de travail comme prévu.

Je suis un peu malade en ce moment donc c'est probablement un oubli, mais j'ai été stairing à ce que pour une heure maintenant et ne peut pas le comprendre.

Toutes les pensées?

Grâce

MODIFIER pastebin amour http://pastebin.com/SeZkjmHa

source d'informationauteur qwerty

  1. 31

    Je ne suis pas à reproduire votre problème. Quel navigateur?

    Pensée initiale (sans voir une erreur de cas) est de changer votre fond initiale de définition d'une "arrière-plan:" pour une image de fond d'écran de la déclaration:

    .button{
  background-image:url(theimage.jpg);
  width;height; etc...
}

    Par la mise en arrière-plan, qui est un conteneur pour le background-position, certains navigateurs peuvent avoir des problèmes avec la spécificité des questions.

  2. 8

    Diviser le "arrière-plan", abréviation de la propriété.

    Si vous omettez l'une des entrées d'une abréviation de la propriété, les omis d'entrée est réinitialisé à la valeur par défaut plutôt que de simplement le laisser seul.

    Donc ce qui se passe est plus ou moins l'équivalent de ceci:

    #someElement {
    background-position:0 -100px;
    background:url(image.png) no-repeat;
    /* ^--- omitted background-position gets reset to the default */
}

    Briser l'abréviation dans les différentes entrées:

    #someElement {
    background-image:url(image.png);
    background-repeat:no-repeat;
}

    EDIT: Dans ton code, le background-position valeurs venir après le background valeurs... Mais je suis assez sûr que la #buttons .button sélecteur est plus spécifique que le #retain-our-firm et semblables à des sélecteurs, en ce sens que sa règle est prioritaire sur les autres même si les autres viennent après.

  3. 2

    Je sais que cela a été demandé il y a longtemps, mais je pense que j'ai le fix.

    J'ai eu exactement le même problème, le positionnement a été de travailler dans Chrome, etc, mais pas Firefox.

    A fallu si longtemps pour comprendre la réponse idiote,

    background-position     :   7 4;

    Va travailler dans chrome, mais pas Firefox..

    background-position     :   7px 4px;

    Fonctionnent dans les deux.

  4. 1

    Fonctionne si vous fractionnez les propriétés de fond, http://jsfiddle.net/kTYyU/.

    #buttons .button{
    display:block;
    position:relative;
    float:left;
    width:250px;
    height:80px;
    padding-left:20px;
    background-image:url(http://www.websitesforlawyers.us/images/valid_xhtml_code_icon.png);
    background-repeat:no-repeat;
}
  5. 0

    Avez-vous envisagé d'obtenir en <ul> <li> </li> <ul>?
    Il est beaucoup plus facile de cette façon.
    comme: 

    <ul class="buttons">
    <li  href=''></a>
    <li  href=''></a>
    <li  href=''></a>
</ul>

    pour le css partie

    .buttons li{
    background:url(theimage.jpg);
    width;height; etc...
}

.buttons li:hover{
    background-position:0 0;
 }

    voir si cela fonctionne 😉

  6. 0

    Je pense que le problème vient de déclarer incomplète abréviation de la propriété sur votre .button classe.

    Fixe exemple peut être vu à jsFiddle: http://jsfiddle.net/rRVBL/