Slik dimmerer du et bilde i CSS

Dimming av et bilde gjør det vanskeligere å se, men det kan bare være effekten du leter etter. Et svakt bilde blir mindre fremtredende på en nettside og trekker mindre oppmerksomhet enn gjenstander som omgir den. Du kan for eksempel redusere et bilde av en solfylt strand, for å tegne en brukeres fokus på en meny under bildet. Du trenger ikke å opprette flere bilder for å produsere denne dimmeffekten. Cascading Style Sheets, eller CSS, kan utføre dette trikset med noen få linjer med kode.

CSS

CSS er et språk som nettstedet designere bruker til å definere måten objekter ser på nettsider. Disse attributter, for eksempel farge og opasitet, har verdier som vist i følgende eksempel: .redBorder {border-color: red; border-type: fast;}

Denne koden oppretter en CSS-klasse som heter redBorder. Hvis en av HTML-img-kodene dine refererer til denne klassen, ser besøkende på en solid rød kant rundt bildet når de ser på den på nettsiden din. HTML-koden som refererer til denne klassen, ser slik ut, og den røde grensen kan fjernes ved å fjerne klassen referansen i denne img-taggen:

CSS Opacity

Ved å endre et opasitets bilde ved hjelp av CSS, gjør du det mørkere. Koden som vises nedenfor lager en klasse med navnet opacity40 som definerer opacitetsverdier på 40 prosent: .opacity40 {filter: alfa (opacity = 40);

opasitet: 0, 4; }

Klassens filterattributt bruker en opacitetsskala mellom 0 og 100, og dens opasitetsattributt har en opasitetsskala med verdier som varierer fra 0 til 1. Ved å bruke begge attributter, sikrer du at alle nettlesere kan endre bildens opasitet. Legg til denne klassen referanse til et bilde for å gjøre det svakt. Du kan også opprette en klasse med navnet "opacity100" og angi verdiene slik at bildens opasitet er 100 prosent. Den klassen ville gjøre bildet ugjennomsiktig.

Dimming Programmatisk

Din nettside kan vise et nedtonet bilde når brukerne åpner siden, eller koden kan føre til at bildet senkes etter at siden laster. For å gjøre bildet svakt i utgangspunktet, setter du opaciteten til en lavere verdi, som beskrevet tidligere. For å dempe bildet mens programmet kjører, endrer du navnet på klassen som definerer bildens opasitet som vist i eksempelet nedenfor: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

Denne koden, som vises i en JavaScript-funksjon, får en referanse til bildet og endrer klassenavnet til "opacity40". Brukere kan klikke på en knapp som kjører JavaScript-funksjonen, eller koden kan ringe til det når som helst.

betraktninger

Du JavaScript-funksjonen trenger ID-verdien til bildet du vil dimme hvis du ønsker å endre opaciteten dynamisk. Bildet id i eksemplet som er beskrevet tidligere er "image1." Hvis du har flere bilder til å dimme, gi dem unike id-verdier og send dem til funksjonen som utfører opacitetsendringen. Opprett så mange CSS-klasser som du liker som definerer ulike grader av ugjennomtrengelighet. Du kan da dimme et bilde til en viss grad ved å endre klassenavn i JavaScript-funksjonen.