Kuvien lineaariseen gradienttiin liittyvä suurin ongelma on, että voi olla vaikeaa luoda saumatonta siirtymää kuvan ja gradientin välillä. Lineaarisia liukuvärejä käytetään usein luomaan kuvan tausta, mutta jos liukuvärin värit eivät vastaa kuvan värejä, se voi näyttää luonnottomalta tai ärsyttävältä. Lisäksi lineaarisia gradientteja voi olla vaikea hallita ja säätää halutun vaikutuksen saavuttamiseksi.
<div style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.jpg');">
</div>
1. Tämä koodirivi luo div-elementin.
2. Tyyli-attribuutti asetetaan taustakuvaksi, jossa on lineaarinen gradientti ja kuvan URL-osoite.
3. Lineaarisessa gradientissa on kaksi väriä, jotka molemmat ovat rgba-mustia, joiden opasiteetti on 0.5 (50 % läpinäkyvä).
4. Kuvan URL-osoite on "image.jpg".
Mikä on gradientti
Gradientti HTML:ssä on siirtymä kahden tai useamman värin välillä. Sitä voidaan käyttää luomaan tasainen siirtyminen yhdestä väristä toiseen tai yhdestä värisävystä toiseen. Liukuvärejä voidaan käyttää verkkosivujen taustoihin, reunuksiin ja muihin elementteihin. Ne luodaan CSS linear-gradient() -funktiolla, ja niissä voi olla useita pysähdyksiä ja värejä.
linear-gradient()-funktio
HTML:n linear-gradient()-funktiota käytetään lineaarisen värigradientin luomiseen. Se ottaa kaksi tai useampia väriarvoja parametreina ja näyttää sujuvan siirtymän niiden välillä. Linear-gradient()-funktion syntaksi on:
lineaarinen gradientti(suunta, väri1, väri2, …);
Missä suunta on gradientin kulma ja se voidaan määrittää käyttämällä avainsanoja (esim. "ylös" tai "alalle") tai käyttämällä kulmaa (esim. 45 astetta). Värit määritetään joko nimettyinä väreinä (esim. “punainen”), heksadesimaaliarvoina (esim. “#FF0000″), RGB-arvoina (esim.”rgb(255, 0, 0)”) tai HSL-arvoina (esim.”hsl(0, 100%, 50%)). Useita värejä voidaan määrittää erottamalla ne pilkuilla ja ne sekoitetaan yhteen siinä järjestyksessä kuin ne on listattu parametriluettelossa luomaan tasainen siirtymä niiden välillä pitkin sille annetun suuntaparametrin arvon määrittämää gradienttiviivaa
Kuinka käytät lineaarista gradienttia kuvassa
Lineaarista gradienttia voidaan käyttää HTML-kuvassa käyttämällä background-image-ominaisuutta. Tämän syntaksi on:
taustakuva: lineaarinen-gradient(
Missä suunta on liukuvärin suunta ja väri1 ja väri2 ovat kaksi väriä, jotka sekoitetaan yhteen. Jos esimerkiksi haluat luoda lineaarisen gradientin ylhäältä alas punaisella ja sinisellä, käytä:
background-image: lineaarinen gradientti (alaan, punainen, sininen);
