Kā mainīt attēla krāsu CSS

Lūk, šī raksta rezultāti:

• filtra Īpašums
• ēnas ()
• necaurredzamība ()

Sāksim!

Mainiet attēla krāsu CSS

Lai mainītu attēla krāsu CSS, vispirms uzziniet par filtra rekvizītu un tā funkcijām. Tādā veidā jūs iegūsit labāku izpratni.

filtrēt CSS īpašumu

Lai kontrolētu attēla filtra vizuālo efektu, tiek izmantots CSS rekvizīts. Vizuālie efekti ir:

• aizmiglot
• spilgtumu
• krāsu regulēšana
• ēnas
• necaurredzamība

Filtra rekvizīta sintakse

Filtra rekvizīta sintakse ir:

• izpludināt (): izmanto, lai attēlam piemērotu izplūšanas efektu.
• ēnas (): izveidot ēnu virs attēla.
• necaurredzamība (): izmanto, lai attēlam pievienotu caurspīdīgumu.

Izmantojot šo filtra rekvizītu, mēs varam izmantot vairākus filtrus. Šis raksts ir par to, kā mainīt attēla krāsu, tāpēc šeit mēs paskaidrosim, kā ar to izmantot drop-shadow() un opacity() funkcijas.

ēnas ()

drop-shadow() ir CSS iebūvēta funkcija, kas ļauj iestatīt ēnu jebkuram elementam vai attēlam. Funkcijā drop-shadow() tiek izmantoti šādi parametri, lai mainītu attēla krāsu:

• offset-x: To izmanto, lai pievienotu horizontālu ēnu.
• offset-y: Izmantojot šo, ēnas tiek pievienotas vertikāli.
• krāsa: Ēnas tiek iekrāsotas ar šo parametru.

Lai precizētu šos punktus, pāriesim pie nolaižamās ēnas sintaksi:

• nobīde-x un nobīde-y var būt pozitīvas vai negatīvas.
• Horizontālā režīmā pozitīva vērtība tiek izmantota, lai pievienotu efektus labajā pusē, un negatīvā vērtība ir kreisajā pusē.
• Vertikāli pozitīvā vērtība ir apakšējai pusei, bet negatīvā - augšējai pusei.
• Krāsas vietā varat piešķirt jebkuru krāsu, kuru vēlaties piešķirt attēlam.

necaurredzamība ()

opacity() izmanto, lai elementam vai jebkuram attēlam pievienotu caurspīdīgumu. Necaurredzamības () sintakse ir:

Šeit ' numuru ” i s izmanto, lai iestatītu necaurredzamības līmeni no 0,0 līdz 1,0. Lai attēls būtu pilnībā caurspīdīgs, varat iestatīt to kā 0,0.

Lai precizētu iepriekš minētos punktus, pāriesim pie piemēra.

Kā mainīt attēla krāsu CSS?

Tālāk esošajā piemērā vispirms pievienosim attēlu, izmantojot tagu :

Pirms filtra rekvizīta lietošanas rezultāts bija šāds:

Lai mainītu attēla krāsu, pārejiet uz CSS un lietosim tam filtra rekvizītu. Attēla caurspīdīgumam mēs iestatīsim necaurredzamību uz 0,5. Funkcijā drop-shadow() offset-x un offset-y vērtība ir 0, jo mēs vēlamies mainīt tikai attēla krāsu.

Šeit ir gala rezultāts pēc ieviešanas:

Attēla krāsa ir veiksmīgi mainīta.

Secinājums

Lai mainītu attēla krāsu, ar filtra rekvizītu tiek izmantotas divas CSS funkcijas: opacity() un drop-shadow(). opacity() norāda attēla caurspīdīgumu, un drop-shadow() piešķir attēlam krāsu un ēnu. Šis raksts izskaidro attēla krāsas maiņas metodi, izmantojot CSS.