Kuinka muuttaa kuvan väriä CSS:ssä

Tässä ovat tämän artikkelin tulokset:

• suodattimen ominaisuus
• varjo ()
• opasiteetti ()

Aloitetaan!

Muuta kuvan väriä CSS:ssä

Jos haluat muuttaa kuvan väriä CSS:ssä, tutustu ensin suodatinominaisuuteen ja sen toimintoihin. Saat paremman ymmärryksen tällä tavalla.

suodatin CSS-ominaisuus

Kuvasuodattimen visuaalisen tehosteen ohjaamiseen käytetään CSS:n ominaisuutta. Visuaaliset tehosteet ovat:

• hämärtää
• kirkkaus
• värin säätö
• varjo
• opasiteetti

Suodattimen ominaisuuden syntaksi

Suodatinominaisuuden syntaksi on:

• hämärtää(): käytetään sumennustehosteen lisäämiseen kuvaan.
• drop-shadow(): luoda varjon kuvan päälle.
• opasiteetti (): käytetään lisäämään kuvan läpinäkyvyyttä.

Voimme käyttää useita suodattimia käyttämällä tätä suodatinominaisuutta. Tämä artikkeli käsittelee kuvan värin vaihtamista, joten tässä selitämme, kuinka drop-shadow()- ja opacity()-funktioita käytetään sen kanssa.

varjo ()

drop-shadow() on CSS:n sisäänrakennettu toiminto, joka mahdollistaa varjon asettamisen mille tahansa elementille tai kuvalle. Seuraavia parametreja käytetään drop-shadow()-funktiossa kuvan värin muuttamiseen:

• offset-x: Sitä käytetään lisäämään vaakasuuntaista varjoa.
• offset-y: Varjot lisätään pystysuunnassa käyttämällä tätä.
• väri: Varjot väritetään tällä parametrilla.

Selventääksesi näitä kohtia, siirrytään varjon syntaksiin:

• offset-x ja offset-y voivat olla positiivisia tai negatiivisia.
• Vaaka-asennossa positiivista arvoa käytetään lisäämään tehosteet oikealle puolelle ja negatiivista arvoa vasemmalle puolelle.
• Pystysuorassa positiivinen arvo on alapuolelle ja negatiivinen yläpuolelle.
• Värin tilalle voit määrittää minkä tahansa värin, jonka haluat antaa kuvalle.

opasiteetti ()

opacity():tä käytetään lisäämään läpinäkyvyyttä elementtiin tai mihin tahansa kuvaan. Opacity():n syntaksi on:

Tässä ' määrä ” i s:llä asetetaan opasiteettitaso välillä 0,0 - 1,0. Jos haluat tehdä kuvasta täysin läpinäkyvän, voit asettaa sen arvoksi 0,0.

Selventääksesi edellä mainittuja kohtia, siirrytään esimerkkiin.

Kuinka muuttaa kuvan väriä CSS:ssä?

Alla olevassa esimerkissä lisäämme ensin kuvan -tunnisteen avulla:

Ennen suodatinominaisuuden käyttöönottoa tulos oli seuraava:

Jos haluat muuttaa kuvan väriä, siirrytään CSS:ään ja käytä siihen suodatinominaisuutta. Asetamme opasiteetiksi 0,5 kuvan läpinäkyvyyden vuoksi. Drop-shadow()-funktiossa offset-x:n ja offset-y:n arvo on 0, koska haluamme muuttaa vain kuvan väriä.

Tässä lopputulos toteutuksen jälkeen:

Kuvan värin vaihtaminen onnistui.

Johtopäätös

Kuvan värin muokkaamiseksi kahta CSS-funktiota: opacity() ja drop-shadow() käytetään suodatinominaisuuden kanssa. opacity() määrittää kuvan läpinäkyvyyden ja drop-shadow() määrittää kuvalle värin ja varjon. Tämä kirjoitus selitti menetelmän muuttaa kuvan väriä CSS:n avulla.