Changement de position de fond CSS sur l'axe Y seulement

Question

Ok ... alors voici le problème. J'ai une image de sprite CSS composée de dix (10) icônes 25px x 25px disposées horizontalement - résultant en une image de sprite de largeur 250px. J'utilise ces images 25x25 comme des miniatures. Je cherche à avoir une opacité de 30% sur ces images dans la vue INITIAL et quand un utilisateur passe la souris dessus, l'opacité doit être de 100% (1).

Donc ce que j'ai fait était de créer une deuxième rangée d'images avec leur opacité à 30% - alors maintenant j'ai une image de sprite de 250px x 50px. Le haut 25px à 100% et le bas 25px à 30%.

I HTML de configuration 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; } 

Cependant, cela ne semble pas fonctionner, malheureusement, en arrière-plan-position y est pas pris en charge dans Firefox (ou n'est pas une norme, mais est spécifique à IE).

L'idée est que nous voulons (seulement) déplacer l'image du sprite vers le HAUT (le long de l'axe y) et laisser l'axe des x tel quel (ou a été défini dans les classes précédentes).

S'il n'y a pas de solution CSS simple à cela - cet effet d'opacité peut-il être fait avec JQUERY? Ainsi, les pouces se chargeraient à une opacité de 30% et passeraient à une opacité de 100% lorsque l'utilisateur planerait?

Un grand merci,

M.

Answer 1

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

Comme Lou l'a fait remarquer, utilisez opacity pour que vos icônes soient visibles à 30% ou entièrement visibles. Pas besoin de jouer avec background-position plus.

Allez-y et définir en conséquence vos styles à ce qui suit:

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, prenez les parties IE spécifiques (qui ne validera pas) et les mettre dans des fichiers CSS spécifiquement ciblés via conditional comments.

Espérons que ça aide.

Answer 2

Note: For this to work in Mozilla, the background-attachment property must be set to "fixed".

ce que cela a une incidence?

-

Vous avez seulement 10 images, il suffit de définir une classe CSS pour chacun. De cette façon, vous pouvez spécifier la coordonnée x correspondante.

ps. J'espère que vous n'utilisez pas ce css exact, en appliquant ce style à un: hover s'appliquerait à tous les liens sur la page. Vous devriez l'appliquer uniquement au style imagé.

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 y a aussi opacity..

Answer 3

Je crois que la réponse de Lou fait ce que vous voulez faire - il vous suffit de définir une classe pour chaque état et définir les coordonnées x et y.

Si vous voulez l'effet de l'évanouissement, alors jQuery gives you a way to do it. Cela pourrait probablement vous obtenir ce que vous voulez, si tel est le cas:

$(".thumb").css("opacity", 0.33); 
$(".thumb").hover(
    function() { 
     $(this).fadeTo(300, 1.0); 
    }, 
    function() { 
     $(this).fadeTo(1, 0.33); 
    } 
); 

EDIT: mise à jour selon sur les retours. L'opacité initiale est maintenant définie.

Answer 4

Quelques petites omissions, fautes de frappe et codes inutiles dans l'exemple précédent. Devinez votre code pourrait ressembler à 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> 

Answer 5

moyen facile

{background-position:100% 4px;} 

vous pouvez utiliser la filiation avec pixel pour remplacer la propriété position-y fond