Posso alterar a aparência de uma imagem HTML durante o foco sem uma segunda imagem?

Question

Existe uma maneira de alterar a aparência de um ícone (ou seja,contraste/luminosidade) quando passo o cursor, sem exigir um segundo arquivo de imagem (ou sem exigir uma parte oculta da imagem)?

Answer 1

Aqui estão algumas boas informações sobre opacidade e transparência de imagens com CSS.

Então, para fazer uma imagem com opacidade de 50%, você faria o seguinte:

<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />

O opacidade: parte é como o Firefox faz isso e é um valor entre 0,0 e 1,0. filtro: é como o IE faz isso e é um valor de 0 a 100.

Answer 2

Você não usa uma tag img, mas um elemento com um atributo CSS de imagem de fundo e define a posição de fundo ao passar o mouse.O IE requer uma tag 'a' como elemento pai para o seletor :hover.Eles são chamados de sprites CSS.

Um ótimo artigo explicando como usar sprites CSS.

Answer 3

Aqui está um código para brincar.Ideia básica:coloque todos os estados possíveis da imagem em uma imagem grande, defina um "tamanho da janela", que seja menor que a imagem;mova a janela usando background-position.

#test {
  display: block;
  width: 250px;  /* window */
  height: 337px; /*  size  */
  background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
  border: 1px solid red; /* for debugging */
  text-indent: -1000px; /* hide the text */
}

#test:hover {
  background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}

<a href="#" id="test">a button</a>

Answer 4

A maneira como costumo ver as coisas feitas com imagens menores, como botões, mostra que apenas uma determinada parte da imagem é mostrada.Então, muitos estados da imagem formarão uma imagem maior que será deslocada para trás da porta visível.Vou deletar isso quando alguém tiver o código.