Här är resultaten av den här artikeln:
Låt oss börja!
Ändra bildfärg i CSS
För att ändra färgen på bilden i CSS, läs först om filteregenskapen och dess funktioner. Du kommer att få en bättre förståelse på detta sätt.
filter CSS-egenskap
För att kontrollera den visuella effekten av en bildfilteregenskap för CSS används. Visuella effekter är:
- fläck
- ljusstyrka
- färgjustering
- skugga
- opacitet
Syntax för filteregenskap
Syntaxen för filteregenskapen är:
filtrera : fläck ( ) | skugga ( ) | opacitet ( )- fläck(): används för att applicera oskärpa på bilden.
- drop-shadow(): skapa en skugga över en bild.
- opacitet(): används för att lägga till transparens i bilden.
Vi kan använda flera filter med denna filteregenskap. Den här artikeln handlar om hur man ändrar färgen på bilden, så här kommer vi att förklara hur man använder funktionerna drop-shadow(), och opacity() med den.
drop-shadow()
drop-shadow() är en inbyggd funktion i CSS som gör det möjligt att ställa in skugga för alla element eller bild. Följande parametrar används i funktionen drop-shadow() för att ändra färgen på en bild:
- offset-x: Den används för att lägga till horisontell skugga.
- offset-y: Skuggor läggs till vertikalt med detta.
- Färg: Skuggor färgas med denna parameter.
För att förtydliga dessa punkter, låt oss gå till syntaxen för skugga:
skugga ( offset-x offset-y färg )- offset-x och offset-y kan vara positiva eller negativa.
- I horisontellt används positivt värde för att lägga till effekterna på höger sida, och negativt är för vänster sida.
- I vertikalt är det positiva värdet för undersidan och det negativa för toppen.
- I stället för färg kan du tilldela vilken färg du vill ge bilden.
opacitet()
opacity() används för att lägga till transparens till ett element eller vilken bild som helst. Syntaxen för opaciteten() är:
opacitet ( siffra ) ;Här ' siffra ” i s används för att ställa in opacitetsnivån mellan 0,0 till 1,0. För att göra en bild helt transparent kan du ställa in den som 0.0.
För att förtydliga punkterna ovan, låt oss gå till exemplet.
Hur ändrar man bildfärg i CSS?
I exemplet nedan lägger vi först till en bild med -taggen:
< img klass = 'bild' src = 'image.jpg' allt = '' >
< / kropp >
Innan du tillämpade filteregenskapen blev resultatet så här:
För att ändra färgen på en bild, låt oss flytta till CSS och tillämpa filteregenskapen på den. Vi kommer att ställa in opaciteten till 0,5 för genomskinlighet i bilden. I drop-shadow()-funktionen är värdet för offset-x och offset-y 0 eftersom vi bara vill ändra färgen på en bild.
.bild {filtrera : opacitet ( 0,5 ) skugga ( 0 0 brun ) ;
}
Här är det slutliga resultatet efter implementeringen:
Färgen på bilden har ändrats.
Slutsats
För att ändra färgen på en bild används två CSS-funktioner: opacity() och drop-shadow() med filteregenskapen. opacity() anger genomskinligheten för bilden och drop-shadow() tilldelar färg och skugga till bilden. Den här texten förklarade metoden för att ändra färgen på en bild med hjälp av CSS.