Sådan Dim et billede i CSS

Dæmpning af et billede gør det sværere at se, men det kan bare være den effekt, du leder efter. Et svagt billede bliver mindre fremtrædende på en webside og giver mindre opmærksomhed end objekter, der omgiver det. Du kan måske dæmpe et billede af en solrig strand, for eksempel at tegne en brugers fokus på en menu under billedet. Du behøver ikke oprette flere billeder for at producere denne dæmpningseffekt. Cascading Style Sheets eller CSS kan udføre dette trick ved at bruge et par linjer kode.

CSS

CSS er et sprog, som webdesignere bruger til at definere måden objekter ser på websider. Disse attributter, såsom farve og uigennemsigtighed, har værdier som vist i følgende eksempel: .redBorder {border-color: red; border-style: solid;}

Denne kode opretter en CSS klasse kaldet redBorder. Hvis en af ​​dine HTML-img-tags refererer til denne klasse, kan besøgende se en solid rød ramme rundt om billedet, når de vises på din webside. HTML-koden, der refererer til denne klasse, ser ud som følger, og den røde grænse kan fjernes ved at fjerne klassen reference i denne img-tag:

CSS Opacitet

Ved at ændre et billede's uigennemsigtighed ved hjælp af CSS, gør du det lysere. Koden vist nedenfor skaber en klasse med navnet opacity40, der definerer opacitetsværdier på 40 procent: .opacity40 {filter: alfa (opacitet = 40);

opacitet: 0, 4; }

Klassens filterattribut bruger en opacitetskala mellem 0 og 100, og dens opacitetsklasse har en opacitetskala med værdier fra 0 til 1. Brug begge attributter sikrer, at alle browsere kan ændre billedets opacitet. Tilføj denne klassereference til et billede for at gøre det svagt. Du kan også oprette en klasse med navnet "opacity100" og indstille dens værdier, så billedets opacitet er 100 procent. Denne klasse ville gøre billedet uigennemtrængeligt.

Dæmpning Programmatisk

Din webside kan vise et nedtonet billede, når brugerne åbner siden, eller din kode kan få billedet til at dæmpe senere, efter at siden er indlæst. For at gøre billedet svagt indledningsvis skal du sætte opaciteten til en lavere værdi som tidligere beskrevet. For at dæmpe billedet, når din applikation kører, skal du ændre navnet på den klasse, der definerer billedets opacitet som vist i eksemplet nedenfor: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

Denne kode, der vises i en JavaScript-funktion, får en henvisning til billedet og ændrer sit klassenavn til "opacity40". Brugere kan klikke på en knap, der kører JavaScript-funktionen, eller din kode kan kalde det til enhver tid.

Overvejelser

Din JavaScript-funktion har brug for id-værdien af ​​det billede, du ønsker at dæmpe, hvis du ønsker at ændre sin opacitet dynamisk. Billed-id'et i det tidligere beskrevne eksempel er "image1". Hvis du har flere billeder til at dæmpe, skal du give dem unikke id-værdier og sende dem til den funktion, der udfører opacitetsændringen. Opret så mange CSS-klasser som du kan lide, der definerer forskellige grader af opacitet. Du kan derefter dæmpe et billede i nogen grad ved at ændre sin klassereference i JavaScript-funktionen.