CSS mudança background-position somente em Y-Axis

Question

Ok ... então aqui está o problema.

Eu tenho uma imagem de CSS Sprite composta de 10 (dez) 25px x 25px ícones dispostos horizontalmente -. Resultando em uma imagem do sprite de 250px de largura

Eu estou usando estes 25x25 imagens como miniaturas. Eu estou olhando para ter uma opacidade de 30% sobre essas imagens em vista inicial e quando um usuário passa sobre eles as necessidades de opacidade para ser 100% (1).

Então, o que eu fiz foi criar uma linha de SEGUNDO de imagens com sua opacidade em 30% - então agora eu tenho uma imagem do sprite de 250px x 50px. A 25 pixels superior a 100% e a 25 pixels inferior a 30%.

I configuração HTML da seguinte forma:

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

eo 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; }

No entanto, isso não parece trabalho, infelizmente, como background-position-y não é suportado no Firefox (ou não é uma norma, mas é IE-específico).

A idéia é que nós (apenas) querem mudar o sprite imagem UP (ao longo do eixo Y) e deixar o eixo-x como é (ou foi definido nas classes anteriores).

Se não houver nenhuma solução CSS simples para isso - pode este efeito opacidade ser feito com jQuery? Assim, os polegares iria carregar a 30% de opacidade e que a transição para 100% de opacidade quando paira usuário?

Muito obrigado,

M.

Answer 1

Você não precisa de um segundo conjunto de ícones, nem o uso de JavaScript para alcançar o efeito desejado.

Como Lou apontou, uso opacity para fazer seus ícones 30% ou totalmente visíveis. Não há necessidade de mexer com mais background-position.

Basta ir em frente e definir seus estilos de acordo com o seguinte:

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

Se você está preocupado sobre a validação do seu código CSS, tomar as partes específicas do IE (que não irá validar) e colocá-los em arquivos CSS especificamente orientadas via comentários condicionais .

Espero que ajude.

Answer 2

Eu acredito que a resposta de Lou faz o que você quer fazer -. Você só tem que definir uma classe para cada estado e definir tanto coordenadas x e y

Se você queria o efeito de atenuação, então jQuery dá-lhe uma maneira de fazê-lo . Este provavelmente poderia conseguir o que você quer, se é esse o caso:

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

Editar : Atualizado baseado fora feedback. opacidade inicial está definido.

Answer 3

forma fácil

{background-position:100% 4px;}

Você pode usar parentesco com pixel para substituto background-position-y propriedade

Answer 4

Nota: Para que isso funcione no Mozilla, a propriedade background-attachment deve ser definido a "fixo".

que isso tem alguma relação?

-

Você só tem 10 imagens, basta definir uma classe css para cada um. Dessa forma, você pode especificar o x coord relativa.

ps. Eu espero que você não está usando que css exata, aplicando esse estilo para a: hover se aplica a todos os links na página. Você deve estar aplicando-a somente o estilo de imagens.

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

Há também opacidade ..

Answer 5

Algumas pequenas omissões, erros e código desnecessário no exemplo anterior. Acho que o seu código poderia ser algo como isto:

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