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

Question

Ok ... voilà le problème.

J'ai une image sprite CSS composée de dix (10) icônes 25px x 25px disposées horizontalement, ce qui donne une image sprite d'une largeur de 250px.

J'utilise ces images 25x25 sous forme de vignettes. Je souhaite obtenir une opacité de 30% sur ces images dans la vue INITIAL et lorsqu'un utilisateur la survole, l'opacité doit être de 100% (1).

Donc, ce que j’ai fait est de créer une SECONDE rangée d’images avec une opacité de 30% - alors, j’ai maintenant une image sprite de 250 x 50 pixels. Les 25px supérieurs à 100% et les 25px inférieurs à 30%.

J'ai configuré le code 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; }

Cependant, cela ne semble malheureusement pas fonctionner, car background-position-y n'est PAS supporté par Firefox (ou n'est pas un standard, mais est spécifique à IE).

L'idée est que nous souhaitons (uniquement) déplacer l’image du sprite vers le haut (le long de l’axe des 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 réalisé avec JQUERY? Ainsi, les pouces se chargeraient à une opacité de 30% et passeraient à une opacité de 100% lorsque l'utilisateur survolerait?

Merci beaucoup,

M.

Answer 1

Vous n'avez pas besoin d'un second jeu d'icônes ni de l'utilisation de JavaScript pour obtenir l'effet souhaité.

Comme Lou l'a fait remarquer, utilisez opacity pour rendre vos icônes 30% ou entièrement visibles. Plus besoin de jouer avec position-arrière-plan .

Allez-y, définissez vos styles en fonction des éléments suivants:

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 la validation de votre code CSS vous inquiète, prenez les parties spécifiques à IE (qui ne seront pas validées) et insérez-les dans des fichiers CSS spécifiquement ciblés via commentaires conditionnels .

L’espoir que cela aide.

Answer 2

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

Si vous souhaitiez l'effet de fondu, jQuery vous donne le moyen de le faire . Cela pourrait probablement vous donner 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 : mis à jour en fonction des commentaires. L'opacité initiale est maintenant définie.

Answer 3

moyen facile

{background-position:100% 4px;}

vous pouvez utiliser la parenté avec pixel pour remplacer la propriété background-position-y

Answer 4

Remarque: pour que cela fonctionne dans Mozilla, la propriété background-attachment doit être définie. pour "fixe".

Est-ce que cela a une incidence?

-

Vous n’avez que 10 images, définissez simplement une classe CSS pour chacune d’elles. De cette façon, vous pouvez spécifier la coordonnée x relative.

ps. J'espère que vous n'utilisez pas ce css exact, appliquer ce style à un: survol s'appliquerait à tous les liens de la page. Vous devriez l'appliquer uniquement au style représenté.

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 existe également des opacité ..

.

Answer 5

Quelques petites omissions, fautes de frappe et codes inutiles dans l'exemple précédent. Devinez que votre code pourrait ressembler à quelque chose comme ça:

<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>