Kaip pakeisti vaizdo spalvą CSS

Štai šio straipsnio rezultatai:

• filtro ypatybė
• mesti šešėlį()
• neskaidrumas ()

Pradėkime!

Pakeiskite vaizdo spalvą CSS

Norėdami pakeisti vaizdo spalvą CSS, pirmiausia sužinokite apie filtro savybę ir jo funkcijas. Taip geriau suprasite.

filtro CSS nuosavybė

Vaizdo filtro vaizdiniam efektui valdyti naudojama CSS savybė. Vaizdiniai efektai yra:

• sulieti
• ryškumas
• spalvų reguliavimas
• mesti šešėlį
• neskaidrumas

Filtro ypatybės sintaksė

Filtro ypatybės sintaksė yra tokia:

• blur (): naudojamas vaizdo suliejimo efektui pritaikyti.
• mesti šešėlį(): sukurti šešėlį virš vaizdo.
• neskaidrumas (): naudojamas vaizdo skaidrumui suteikti.

Naudodami šią filtro savybę galime naudoti kelis filtrus. Šis straipsnis yra apie tai, kaip pakeisti vaizdo spalvą, todėl čia paaiškinsime, kaip su ja naudoti drop-shadow() ir opacity() funkcijas.

mesti šešėlį()

drop-shadow() yra integruota CSS funkcija, leidžianti nustatyti šešėlį bet kuriam elementui ar vaizdui. Šie parametrai naudojami funkcijoje drop-shadow(), norint pakeisti vaizdo spalvą:

• offset-x: Jis naudojamas horizontaliam šešėliui pridėti.
• offset-y: Naudojant tai šešėliai pridedami vertikaliai.
• spalva: Šešėliai spalvinami šiuo parametru.

Norėdami paaiškinti šiuos dalykus, pereikime prie šešėlių sintaksės:

• offset-x ir offset-y gali būti teigiami arba neigiami.
• Horizontalioje pusėje teigiama reikšmė naudojama norint pridėti efektus dešinėje, o neigiama – kairėje pusėje.
• Vertikaliai teigiama vertė skirta apatinei pusei, o neigiama – viršutinei.
• Spalvos vietoje galite priskirti bet kokią spalvą, kurią norite suteikti vaizdui.

neskaidrumas ()

opacity() naudojamas elementui ar bet kuriam vaizdui suteikti skaidrumo. Nepermatomumo () sintaksė yra tokia:

Čia “ numerį “ i s naudojamas neskaidrumo lygiui nustatyti nuo 0,0 iki 1,0. Kad vaizdas būtų visiškai skaidrus, galite jį nustatyti kaip 0,0.

Norėdami paaiškinti aukščiau paminėtus dalykus, pereikime prie pavyzdžio.

Kaip pakeisti vaizdo spalvą CSS?

Toliau pateiktame pavyzdyje pirmiausia pridėsime vaizdą naudodami žymą :

Prieš taikant filtro ypatybę, rezultatas buvo toks:

Norėdami pakeisti vaizdo spalvą, pereikime prie CSS ir pritaikykime jam filtro ypatybę. Vaizdo skaidrumui nustatysime nepermatomumą iki 0,5. Funkcijoje drop-shadow() offset-x ir offset-y reikšmė yra 0, nes norime pakeisti tik vaizdo spalvą.

Štai galutinis rezultatas po įgyvendinimo:

Vaizdo spalva sėkmingai pakeista.

Išvada

Norint pakeisti vaizdo spalvą, su filtro savybe naudojamos dvi CSS funkcijos: opacity() ir drop-shadow(). opacity() nurodo vaizdo skaidrumą, o drop-shadow() priskiria vaizdui spalvą ir šešėlį. Šis įrašas paaiškino vaizdo spalvos keitimo naudojant CSS metodą.