Hvordan kode Transparent Bilder i HTML

Ved hjelp av gjennomsiktige bilder på ditt nettsted gjør det mulig å skape mer dynamiske visuelle for de besøkende. Lage gjennomsiktige bilder kan gjøres ganske enkelt ved å redigere eller lage bilder i foto-redigering programmer som Photoshop. Men hvis du ikke har tilgang til slike programmer, eller ikke ønsker å endre bildene dine permanent, kan du kode gjennomsiktige bilder i HTML ved hjelp av CSS egenskaper.

Bruksanvisning

1 Åpne HTML-kilden til filen som inneholder kodet link til bildet du ønsker å gjøre gjennomsiktig.

2 Legg til følgende linje med kode direkte i <img> tag: "style =" opacity: X; filter. Alpha (opacity = X) "

Din img taggen skal se omtrent slik ut: <img width = "150" height = "150" alt = "Mitt bilde" style = "opacity: X; filter: alpha (opacity = X)" />

3 Bytt variablene X med ønsket tall for å angi tettheten. Funksjonen "opacity: X" skal settes på en 0,0 til 1,0 skala der lavere verdi gjør bildet mer gjennomsiktig. Funksjonen "filter: alpha (opacity = X)" bør settes på en 0-100 skala der lavere verdi gjør bildet mer gjennomsiktig. Sett disse til samme verdi, men bruker begge alternativene som de jobber på separate nettlesere.

4 Lagre filen.

5 Vis siden i din nettleser for å teste resultatene. Juster etter behov.