Iată rezultatele acestui articol:
Să începem!
Schimbați culoarea imaginii în CSS
Pentru a schimba culoarea imaginii în CSS, mai întâi aflați despre proprietatea filtrului și funcțiile acesteia. Veți obține o mai bună înțelegere în acest fel.
filtru proprietatea CSS
Pentru a controla efectul vizual al unui filtru de imagine, este utilizată proprietatea CSS. Efectele vizuale sunt:
- estompa
- luminozitatea
- reglarea culorii
- umbra
- opacitate
Sintaxa proprietății filtrului
Sintaxa proprietății filtru este:
filtru : estompa ( ) | umbra ( ) | opacitate ( )- estompa(): folosit pentru a aplica efectul de estompare asupra imaginii.
- umbra(): creați o umbră peste o imagine.
- opacitate(): folosit pentru a adăuga transparență imaginii.
Putem folosi mai multe filtre folosind această proprietate de filtru. Acest articol este despre cum să schimbați culoarea imaginii, așa că aici vom explica cum să folosiți funcțiile drop-shadow() și opacitate() cu aceasta.
umbra()
drop-shadow() este o funcție încorporată a CSS care permite setarea umbrei oricărui element sau imagine. Următorii parametri sunt utilizați în funcția drop-shadow() pentru a schimba culoarea unei imagini:
- offset-x: Este folosit pentru a adăuga umbră orizontală.
- offset-y: Umbrele sunt adăugate vertical folosind aceasta.
- culoare: Umbrele sunt colorate cu acest parametru.
Pentru a clarifica aceste puncte, să trecem la sintaxa drop-shadow:
umbra ( offset-x offset-y culoare )- offset-x și offset-y pot fi pozitive sau negative.
- Pe orizontală, valoarea pozitivă este folosită pentru a adăuga efectele pe partea dreaptă, iar negativă este pentru partea stângă.
- În verticală, valoarea pozitivă este pentru partea de jos, iar cea negativă este pentru partea de sus.
- În locul culorii, puteți aloca orice culoare pe care doriți să o dați imaginii.
opacitate()
opacitatea () este folosită pentru a adăuga transparență unui element sau oricărei imagini. Sintaxa opacității() este:
opacitate ( număr ) ;Aici „ număr ” i este folosit pentru a seta nivelul de opacitate între 0,0 și 1,0. Pentru a face o imagine complet transparentă, o puteți seta ca 0.0.
Pentru a clarifica punctele menționate mai sus, să trecem la exemplu.
Cum se schimbă culoarea imaginii în CSS?
În exemplul de mai jos, mai întâi, vom adăuga o imagine folosind eticheta :
< img clasă = 'imagine' src = „image.jpg” Tot = '' >
< / corp >
Înainte de a aplica proprietatea de filtru, rezultatul a fost astfel:
Pentru a schimba culoarea unei imagini, să trecem la CSS și să îi aplicăm proprietatea de filtru. Vom seta opacitatea la 0,5 pentru transparența imaginii. În funcția drop-shadow(), valoarea offset-x și offset-y este 0 deoarece vrem doar să schimbăm culoarea unei imagini.
.imagine {filtru : opacitate ( 0,5 ) umbra ( 0 0 maro ) ;
}
Iată rezultatul final după implementare:
Culoarea imaginii a fost schimbată cu succes.
Concluzie
Pentru a modifica culoarea unei imagini, două funcții CSS: opacitate() și drop-shadow() sunt utilizate cu proprietatea filtru. opacity() specifică transparența imaginii și drop-shadow() atribuie culoarea și umbra imaginii. Acest articol a explicat metoda de schimbare a culorii unei imagini folosind CSS.