Hoe een afbeelding dimmen in CSS

Het dimmen van een foto maakt het moeilijker om te zien, maar dat is misschien precies het effect waarnaar u op zoek bent. Een vaag beeld wordt minder prominent op een webpagina en trekt minder aandacht dan objecten eromheen. U kunt bijvoorbeeld een foto van een zonnig strand dimmen om de focus van een gebruiker te trekken naar een menu onder de afbeelding. U hoeft niet meerdere afbeeldingen te maken om dit dimeffect te produceren. Cascading Style Sheets, of CSS, kunnen deze truc uitvoeren met behulp van een paar regels code.

CSS

CSS is een taal die siteontwerpers gebruiken om de manier te definiëren waarop objecten op webpagina's worden weergegeven. Deze kenmerken, zoals kleur en dekking, hebben waarden zoals in het volgende voorbeeld: .redBorder {border-color: red; border-style: solid;}

Deze code maakt een CSS-klasse met de naam redBorder. Als een van uw HTML-img-tags naar deze klasse verwijst, zien sitebezoekers een effen rode rand rond de afbeelding wanneer ze deze op uw webpagina bekijken. De HTML-code die naar deze klasse verwijst ziet er als volgt uit en de rode rand kan worden verwijderd door de klasseverwijzing in deze img-tag te verwijderen:

CSS-dekking

Door de dekking van een afbeelding te wijzigen met behulp van CSS, maakt u het dikker. De onderstaande code maakt een klasse met de naam opacity40 die dekkingswaarden van 40 procent definieert: .opacity40 {filter: alpha (onacity = 40);

opaciteit: 0, 4; }

Het filterattribuut van de klasse gebruikt een dekkingsschaal tussen 0 en 100 en het dekkingsattribuut heeft een dekkingsschaal met waarden van 0 tot en met 1. Beide kenmerken zorgen ervoor dat alle browsers de dekking van uw afbeelding kunnen wijzigen. Voeg deze klasseverwijzing toe aan een afbeelding om deze te dimmen. U kunt ook een klasse met de naam "opacity100" maken en de waarden ervan zo instellen dat de dekking van de afbeelding 100 procent is. Die klasse zou het beeld ondoorzichtig maken.

Programmatisch dimmen

Uw webpagina kan een grijs beeld weergeven wanneer gebruikers de pagina openen, of uw code kan ervoor zorgen dat het beeld later wordt gedimd nadat de pagina is geladen. Als u de afbeelding aanvankelijk wilt laten dimmen, stelt u de dekking ervan in op een lagere waarde, zoals eerder beschreven. Als u de afbeelding wilt dimmen terwijl uw toepassing wordt uitgevoerd, wijzigt u de naam van de klasse die de dekking van de afbeelding definieert, zoals in het onderstaande voorbeeld: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

Deze code, die in een JavaScript-functie verschijnt, krijgt een verwijzing naar de afbeelding en verandert de klassenaam in "opacity40". Gebruikers kunnen op een knop klikken die de JavaScript-functie uitvoert, of uw code kan deze op elk gewenst moment gebruiken.

overwegingen

Uw JavaScript-functie heeft de ID-waarde nodig van de afbeelding die u wilt dimmen als u de dekking dynamisch wilt wijzigen. De afbeeldings-ID in het eerder beschreven voorbeeld is "afbeeldings1". Als u meerdere afbeeldingen wilt dimmen, geeft u deze unieke ID-waarden en geeft u ze door aan de functie waarmee de dekking wordt gewijzigd. Maak zoveel CSS-klassen als u wilt, waarmee verschillende niveaus van dekking worden gedefinieerd. U kunt een afbeelding vervolgens enigszins dimmen door de klassenreferentie in de JavaScript-functie te wijzigen.