Modification de la position de l'arrière-plan CSS sur l'axe Y uniquement

Ok...donc, ici, est le problème.

J'ai un sprite CSS image composée de dix(10) 25px x 25px icônes disposées horizontalement entraînant ainsi une image sprite de 250 px de largeur.

Je suis à l'aide de ces 25x25 images sous forme de vignettes. Je cherche à avoir une opacité de 30% sur ces images en vue INITIALE et lorsqu'un utilisateur place le pointeur au-dessus d'eux l'opacité doit être de 100% (1).

Donc ce que j'ai fait a été de créer une DEUXIÈME ligne de images avec leur opacité à 30% - alors maintenant, j'ai une image sprite de 250px x 50px. Le haut 25px à 100% et le bas 25px à 30%.

J'programme d'installation de HTML comme suit:

<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
etc...

et le CSS:

a { display: block; float: left; width: 25px; height: 25px; background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat; }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
a:hover { **background-position-y**: -25px; }

Toutefois, cela ne fonctionne pas, malheureusement, en tant que background-position-y n'est PAS pris en charge dans Firefox (ou n'est pas un standard, mais est IE-spécifique).

L'idée est que nous (seulement) souhaitez modifier l'image du sprite (le long de l'axe des y) et de laisser l'axe des x, comme c'est (ou a été mis dans les classes précédentes).

Si il n'y a pas de CSS simple solution de ce - cette opacité effet être fait avec JQUERY? Donc les pouces, charge à 30% d'opacité et serait transition à 100% d'opacité lorsque l'utilisateur passe?

Merci beaucoup,

source d'informationauteur Mo Boho

12

Vous n'avez pas besoin d'un deuxième ensemble d'icônes, ni l'utilisation de JavaScript pour obtenir l'effet désiré.

Que Lou l'a souligné, l'utilisation opacity pour faire de votre icônes de 30% ou entièrement visible. Pas besoin de jouer avec background-position plus.

Simplement aller de l'avant et de définir vos styles en conséquence le suivant:
```
a {
    opacity:0.3;  /* for standard browsers */
    filter: alpha(opacity = 30);  /* for IE */

    display: block;
    float: left;
    width: 25px;
    height: 25px;
    background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat;
}

a:hover {
    opacity:1.0
    filter: alpha(opacity = 100);
}

.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
```
Si vous êtes inquiet au sujet de la validation de votre code CSS, prendre la IE partie spécifique (qui n'est pas conforme) et de les mettre en ciblant spécifiquement les fichiers CSS via les commentaires conditionnels.

Espère que ça aide.
3

Je crois que Lou réponse est-ce que vous voulez -- vous avez juste à définir une classe pour chaque état et de définir les deux coordonnées x et y.

Si vous vouliez l'effet de décoloration, puis jQuery vous donne un moyen de le faire. Cela pourrait probablement que vous obtenez ce que vous voulez si c'est le cas:
```
$(".thumb").css("opacity", 0.33);
$(".thumb").hover(
    function() {
        $(this).fadeTo(300, 1.0);
    },
    function() {
        $(this).fadeTo(1, 0.33);
    }
);
```
MODIFIER: mise à Jour basé sur la rétroaction. Opacité initiale est maintenant définie.
3

moyen facile
```
{background-position:100% 4px;}
```
vous pouvez utiliser le lien de filiation avec des pixels de substituer background-position-y bien
1

Note: Pour que cela fonctionne sous Mozilla, le background-attachment propriété doit être réglé sur "fixed".

N'ont aucune incidence?

--

Vous n'avez que 10 images, il suffit de définir une classe css pour chacun. De cette façon, vous pouvez spécifier la relative x coord.

ps. J'espère que vous n'utilisez pas l'exacte css, afin d'appliquer un style à un:hover s'appliquerait à tous les liens sur la page. Vous devriez être en l'appliquant uniquement à l'image de style.
```
a { display: block;
    float: left;
    width: 25px;
    height: 25px; 
    background: url("test.jpg") 0 -25px no-repeat;
  }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
.thumb1:hover { background-position: 0 -25px; }
.thumb2:hover { background-position: -25px -25px; }
.thumb3:hover { background-position: -50px -25px; }
```
Il est également l'opacité..

Quelques petites omissions, fautes de frappe et de code inutile dans l'exemple précédent. Suppose que ton code pourrait ressembler à quelque chose comme ceci:

<style>
a { float: left; width: 25px; height: 25px; background-image: url("250_x_50_spriteimage.jpg"); }
a.thumb1 { background-position: 0 0; }
a.thumb2 { background-position: -25px 0; }
a.thumb3 { background-position: -50px 0; }
a { filter: alpha(opacity=30); -moz-opacity:.3; opacity:.3; }
a:hover { filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; }
</style>

<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb2"></a>
<a href="largeimage2.jpg" class="thumb3"></a>

Vous devez vous connecter pour publier un commentaire.