Hur man dimar en bild i CSS

Att dämpa en bild gör det svårare att se, men det kan bara vara den effekt du letar efter. En svag bild blir mindre framträdande på en webbsida och drar mindre uppmärksamhet än objekt som omger det. Du kan dämpa en bild av en solig strand, till exempel för att dra en användares fokus till en meny under bilden. Du behöver inte skapa flera bilder för att producera denna dimmaffekt. Cascading Style Sheets, eller CSS, kan utföra detta trick med några rader av kod.

CSS

CSS är ett språk som webbplatsdesigners använder för att definiera hur objekten ser på webbsidor. Dessa attribut, till exempel färg och opacitet, har värden som visas i följande exempel: .redBorder {border-color: red; border-stil: fast ämne;}

Denna kod skapar en CSS-klass som heter redBorder. Om en av dina HTML-img-taggar refererar till den här klassen, ser besökare en solid röd ram runt bilden när den visas på din webbsida. HTML-koden som hänvisar till den här klassen ser ut som följer och den röda gränsen kan tas bort genom att ta bort klassreferensen i denna img-tagg:

CSS Opacity

Genom att ändra bildens opacitet med hjälp av CSS, gör du det dimmare. Koden som visas nedan skapar en klass med namnet opacity40 som definierar opacitetsvärden på 40 procent: .opacity40 {filter: alfa (opacitet = 40);

opacitet: 0, 4; }

Klassens filterattribut använder en opacitetskala mellan 0 och 100, och dess opacitetsattribut har en opacitetskala med värden som sträcker sig från 0 till 1. Med båda attributen säkerställs att alla webbläsare kan ändra bildens opacitet. Lägg till den här klassens referens till en bild för att göra den mörk. Du kan också skapa en klass med namnet "opacity100" och ställa in dess värden så att bildens opacitet är 100 procent. Den klassen skulle göra bilden ogenomskinlig.

Dämpning Programmatiskt

Din webbsida kan visa en nedtonad bild när användarna öppnar sidan, eller din kod kan få bilden att dämpas senare efter att sidan laddats. För att göra bilden dämpad initialt, sätt dess opacitet till ett lägre värde, som beskrivits tidigare. För att dämpa bilden när programmet körs ändrar du namnet på klassen som definierar bildens opacitet som visas i exemplet nedan: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

Den här koden, som visas i en JavaScript-funktion, får en referens till bilden och ändrar sitt klassnamn till "opacity40". Användare kan klicka på en knapp som kör JavaScript-funktionen, eller din kod kan ringa den när som helst.

överväganden

Du JavaScript-funktionen behöver id-värdet på bilden du vill dimma om du vill ändra sin opacitet dynamiskt. Bildidentifikationen i det tidigare beskrivna exemplet är "image1". Om du har flera bilder att dimma, ge dem unika id-värden och skicka dem till den funktion som utför opacitetsändringen. Skapa så många CSS-klasser som du vill definiera olika grader av opacitet. Därefter kan du dimma en bild till viss del genom att ändra dess klassreferens i JavaScript-funktionen.