la taille de l'arrière-plan avec la position d'arrière-plan ne modifie pas la position?

J'ai un sprite de 62 images de 91 * 91px, ce qui rend le truc 91 * 5642 px. Ils sont affichés dans une sorte de grille dynamique qui augmente et diminue en fonction de l'utilisateur/le mouvement du pointeur. Parfois, un élément (std 91 * 91 px), un zoom pour faire 120 * 120 px. Évidemment, je voulez le fond de croître avec de sorte que l'ensemble de l'91 * 91 px image est affichée dans la totalité des 120 * 120 élément.

Entrer background-size: 100% auto faire de la largeur toujours parfait. Le problème maintenant est que background-position attend de ses valeurs pour être mis à jour! Tous les 62 éléments inline style=background-position etc. Je ne peux pas mettre à jour le fond de la position de la ligne. Je veux que le fond à la première position, puis la redimensionner (zoom), pas de redimensionner et positionner ensuite (zoom à la mauvaise position).

Je ne suis pas sûr que je fais tout sens. Pour clarifier un peu:

  • Tous les éléments ont un style de width: 91px; height: 91px; background-size: 100% auto;.
  • La deuxième image aurait une ligne de style de background-position: 0 -91px.
  • Lorsque vous passez le curseur de l'élément tel qu'il devient un style width: 120px; height: 120px; et puis il montre la majeure partie de la 2ème image et une partie de la 1ère, parce que le positionnement se passe après le redimensionnement =(
  • Si je change le background-position (après zoom/pointage) à 0 -120pxil s'aligne correctement. (Mais évidemment, c'est mal quand pas de zoom/planant.)

Une solution très simple serait d'utiliser réelle zoom: 1.3 ou transform: scale(1.3)mais c'est très TRÈS lent avec des transitions.

Je dois être en manque de quelque chose. CSS a de plus intelligent que cela. Un sprite avec background-size... ce n'est pas impossible est-il!?

Comment le sprite de l'air est à moi, afin que je puisse rendre un 120 * 120 grille au lieu de 91 * 91, si ce serait plus simple...

EDIT: Avec l'exemple de violon: http://jsfiddle.net/rudiedirkx/g4RQx/

Smart réponse 1: background-position: 0 calc(100% /61 * 2) (61 parce 62 images, 2 puisque la 3e image)

source d'informationauteur Rudie

  1. 12

    c'est en fait assez simple, il suffit d'utiliser le pourcentage de position.

    background-position: 0 3.28%;

    http://jsfiddle.net/g4RQx/18/

  2. 5

    Dans votre état de pointage, de modifier votre fond de position selon l'échelle de ratio

    a:hover {
    width: 120px;
    height: 120px;
    background-position: 0 -240px; /* -182px * 1.3186... */
}

    VIOLON

    Juste pour le record: dans votre question, vous avez mentionné que l'échelle est lente. J'ai essayé à l'aide de l'échelle et je ne vois pas lent transtions:

    a:hover {
    transform: scale(1.3);
    transform-origin: 0 0;
    transition: all .5s;
}

    VIOLON

  3. 3

    Si votre exigence est plus lisse de transition que c'est ce que vous avez besoin.

    DÉMO

    DEMO2 avec zoom centré.

    HTML:

     Hover image large transition<br>
    Hover that:<br>

    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>

    CSS:

     p {
    margin: 0;
    display: inline-block;

}
a {
    display: block;
    border: solid 10px green;
    /* always: */
    width: 91px;
    height: 91px;
    background: black url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
    background-size: 100% auto;

    /* inline: */
    background-position: 0 -182px;
     -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
a:hover {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

    Violon: violon

  4. -1

    Bien ..., vous disposez de plusieurs problèmes. 😉

    Les styles en ligne sont "mauvais" dans toutes les manières. La première est que vous ne peut pas se substituer à l'une quelconque CSS externe (à cause de leur plus grande spécificité). Donc c'est déjà une raison pour laquelle il n'existe pas de pure CSS solution à votre problème.

    Une autre raison est, que vous auriez besoin de re-calculer le background-position en fonction de la position réelle, respectivement sur le sprite numéro. Quelque chose vous ne pouvez pas faire avec CSS, encore (par exemple quelque chose comme: background position: 0 calc(nth-child * 91px);)

    Donc la seule pure SCC façon de l'être à l'aide de la vente de transformer ce qui a également assez bien pris en charge!

    BTW: "Comment le sprite de l'air est à moi, afin que je puisse rendre un 120 * 120 grille au lieu de 91 * 91, si ce serait plus simple..."

    Ce serait mieux au moins. La désagrégation est toujours de meilleure qualité que l'upscaling!

    Un Javascript solution, surtout avec jQuery est assez simple sur l'autre, vous pouvez utiliser le .fonction index() et donc facilement calculer le nouveau background-position.

    Conclusion:

    Pour le moment il n'y a pas de réel/solution pratique pour la manipulation des sprites CSS de manière!

  5. -1

    Beaucoup de réponses suggère de pourcentage au lieu de la statique des pixels à l'arrière-plan de point de vente, j'ai cependant avoir une approche différente. C'est un peu bizarre... mais ça fonctionne! <-- violon

    J'ai donc ajouté un span à l'intérieur de votre lien avec l'arrière-plan attaché à elle. Et au lieu de votre inline background-position, j'ai plutôt utilisé hauteur en pourcentage sur la durée, comme ceci:

    <a href="#">
    <span style="height: 100%"></span>
</a>

    Et avec ce css, il sera tout de dont vous avez besoin et de l'image à corriger le reste.

    a {
    display: block;
    overflow: hidden;
    width: 91px;
    height: 91px;
    position: relative;
}
a span{
    background: url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
    background-size: 100% auto;
    background-position: 0 0;
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
}
a:hover {
    width: 120px;
    height: 120px;
}

    C'est plus de html et css que vous avez besoin si vous n'avez pas utiliser les autres solutions, mais la plus de façons de résoudre quelque chose de mieux 🙂

  6. -1

    Je pense que la réponse devrait être simple,

    J'ai mis à jour le violon,

    S'il vous plaît vérifier,

    Si vous spécifiez le style de ce genre, il faut résoudre le problème facilement...

    a {
 display: block; /* always: */
 width: 91px;
 height: 91px;
 background: black url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
 background-size: 100% auto;
 /* inline: */
 background-position: 0% 3.30%; /* this will do the trick */ 
}
a:hover {
 width: 150px;
 height: 150px;
}

    S'il vous plaît répondre si un souci...