Il miglior tutorial immagine CSS trasparente / opaco Nel 2024, in questo tutorial puoi imparare Altri esempi,Esempio 1 - Creare un'immagine trasparente,Esempio 2 - Immagine Trasparenza - hover effetto,Esempio 3 - Casella di testo trasparente,
Usando i CSS è facile creare un'immagine trasparente.
Nota: proprietà CSS Opacitàfa parte delle raccomandazioni W3C CSS3.
Creare un'immagine trasparente - hover effetto
Creare una casella di testo ha un'immagine di sfondo trasparente
La trasparenza nella proprietà CSS3 èl'opacità.
In primo luogo, vi mostreremo come creare un'immagine trasparente con i CSS.
immagine normale
La stessa immagine con trasparenza:
Si consideri il seguente CSS:
IE9, Firefox, Chrome, browser Opera, e Safari utilizza le proprietà di trasparenza dell'immagine possono diventare opachi. valore della proprietà Opacità 0,0-1,0. Valori più piccoli fanno l'elemento più trasparente.
IE8 e le versioni precedenti utilizzano filtri: alpha (opacità = x). X può assumere valori 0-100. Valori più bassi rendono l'elemento più trasparente.
Muovi il mouse sull'immagine:
di stile CSS:
Il primo blocco è il codice CSS nell'Esempio 1, e simili. Inoltre, abbiamo aggiunto anche quello che accade quando l'utente sposta il mouse sopra aleggia una delle immagini. In questo caso, quando l'utente sposta il mouse sull'immagine, speriamo che il quadro è chiaro.
Si tratta diCSS: l'opacità = 1.
IE8 euso precedente: Filtro: alpha (opacità = 100 ).
Quando il puntatore del mouse di distanza dall'immagine, l'immagine sarà ri-trasparenza.
Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente.
Il codice sorgente è il seguente:
In primo luogo, creiamo una altezza fissa e larghezza dell'elemento div un'immagine di sfondo e confine con. Viene creato un più piccoli elementi div all'interno del primo div. Questo div anche avere una larghezza fissa, colore di sfondo, bordo - ed è trasparente. All'interno del div trasparente, si aggiunge del testo all'interno dell'elemento P.