Posso modificare l'aspetto di un'immagine html durante il passaggio del mouse senza una seconda immagine?

StackOverflow https://stackoverflow.com/questions/60290

  •  09-06-2019
  •  | 
  •  

Domanda

C'è un modo per cambiare l'aspetto di un'icona (es.contrasto/luminosità) quando passo il cursore, senza richiedere un secondo file immagine (o senza richiedere una parte nascosta dell'immagine)?

È stato utile?

Soluzione

Ecco alcune buone informazioni sull'opacità e la trasparenza delle immagini con i CSS.

Quindi, per creare un'immagine con un'opacità del 50%, dovresti fare questo:

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

IL opacità: parte è il modo in cui lo fa Firefox ed è un valore compreso tra 0,0 e 1,0. filtro: è così che fa IE ed è un valore compreso tra 0 e 100.

Altri suggerimenti

Non usi un tag img, ma un elemento con un attributo css background-image e imposti la background-position al passaggio del mouse.IE richiede un tag "a" come elemento principale per il selettore :hover.Si chiamano sprite CSS.

Un ottimo articolo che spiega come utilizzare gli sprite CSS.

Ecco del codice con cui giocare.Idea base:inserisci tutti i possibili stati dell'immagine in un'unica grande immagine, imposta una "dimensione della finestra", che sia più piccola dell'immagine;spostare la finestra utilizzando 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>

Il modo in cui di solito vedo le cose fatte con immagini più piccole come i pulsanti, fa sì che venga mostrata solo una certa parte dell'immagine.Quindi molti stati dell'immagine comporranno un'immagine più grande che verrà spostata dietro la porta visibile.Lo eliminerò quando qualcuno avrà il codice.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top