Dit zijn de resultaten van dit artikel:
Laten we beginnen!
Afbeeldingskleur wijzigen in CSS
Als u de kleur van de afbeelding in CSS wilt wijzigen, leert u eerst over de filtereigenschap en zijn functies. Zo krijg je een beter inzicht.
CSS-eigenschap filteren
Om het visuele effect van een afbeelding te controleren, wordt de eigenschap van CSS gebruikt. Visuele effecten zijn:
- vervagen
- helderheid
- kleuraanpassing
- slagschaduw
- ondoorzichtigheid
Syntaxis van filtereigenschap
De syntaxis van de eigenschap filter is:
filter : vervagen ( ) | slagschaduw ( ) | ondoorzichtigheid ( )- vervagen(): gebruikt om het vervagingseffect op de afbeelding toe te passen.
- slagschaduw(): maak een schaduw over een afbeelding.
- dekking(): gebruikt om transparantie aan de afbeelding toe te voegen.
We kunnen meerdere filters gebruiken met deze filtereigenschap. Dit artikel gaat over hoe u de kleur van de afbeelding kunt wijzigen, dus hier zullen we uitleggen hoe u de functies slagschaduw() en dekking() ermee kunt gebruiken.
slagschaduw()
slagschaduw() is een ingebouwde functie van CSS waarmee schaduw kan worden ingesteld op elk element of elke afbeelding. De volgende parameters worden gebruikt in de functie slagschaduw() om de kleur van een afbeelding te wijzigen:
- offset-x: Het wordt gebruikt om horizontale schaduw toe te voegen.
- offset-y: Hiermee worden schaduwen verticaal toegevoegd.
- kleur: Met deze parameter worden schaduwen gekleurd.
Om deze punten te verduidelijken, gaan we naar de syntaxis van slagschaduw:
slagschaduw ( offset-x offset-y kleur )- offset-x en offset-y kunnen positief of negatief zijn.
- In horizontaal wordt een positieve waarde gebruikt om de effecten aan de rechterkant toe te voegen en een negatieve waarde aan de linkerkant.
- In verticaal is de positieve waarde voor de onderkant en de negatieve voor de bovenkant.
- In plaats van kleur kunt u elke kleur toewijzen die u aan de afbeelding wilt geven.
dekking()
opacity() wordt gebruikt om transparantie toe te voegen aan een element of een afbeelding. De syntaxis van de dekking() is:
ondoorzichtigheid ( nummer ) ;Hier “ nummer ” i s gebruikt om het dekkingsniveau in te stellen tussen 0,0 en 1,0. Om een afbeelding volledig transparant te maken, kunt u deze instellen op 0.0.
Om bovenstaande genoemde punten te verduidelijken, gaan we naar het voorbeeld.
Hoe de afbeeldingskleur in CSS te veranderen?
In het onderstaande voorbeeld voegen we eerst een afbeelding toe met de tag :
< img klas = 'afbeelding' src = 'afbeelding.jpg' alles = '' >
< / lichaam >
Voordat de filtereigenschap werd toegepast, was het resultaat als volgt:
Om de kleur van een afbeelding te wijzigen, gaan we naar de CSS en passen we de filtereigenschap erop toe. We zullen de dekking op 0,5 zetten voor de transparantie van de afbeelding. In de functie slagschaduw() is de waarde van offset-x en offset-y 0 omdat we alleen de kleur van een afbeelding willen wijzigen.
.afbeelding {filter : ondoorzichtigheid ( 0,5 ) slagschaduw ( 0 0 bruin ) ;
}
Hier is het eindresultaat na de implementatie:
De kleur van de afbeelding is met succes gewijzigd.
Conclusie
Om de kleur van een afbeelding te wijzigen, worden twee CSS-functies gebruikt: opacity() en slagschaduw() met de eigenschap filter. opacity() specificeert de transparantie van de afbeelding en slagschaduw() wijst kleur en schaduw toe aan de afbeelding. In dit artikel werd de methode uitgelegd om de kleur van een afbeelding te wijzigen met behulp van CSS.