Glavni problem povezan s linearnim gradijentom sa slikama je taj što može biti teško stvoriti neprimjetan prijelaz između slike i gradijenta. Linearni gradijenti često se koriste za stvaranje pozadine za sliku, ali ako boje gradijenta ne odgovaraju onima na slici, može izgledati neprirodno ili neugodno. Osim toga, linearne gradijente može biti teško kontrolirati i prilagoditi kako bi se postigao željeni učinak.
<div style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.jpg');">
</div>
1. Ovaj redak koda stvara element div.
2. Atribut stila postavljen je na pozadinsku sliku s linearnim gradijentom i url-om slike.
3. Linearni gradijent ima dvije boje, od kojih su obje rgba crne s neprozirnošću od 0.5 (50% transparentno).
4. URL slike je 'image.jpg'.
Što je gradijent
Gradijent u HTML-u je prijelaz između dvije ili više boja. Može se koristiti za stvaranje glatkog prijelaza iz jedne boje u drugu ili iz jedne nijanse boje u drugu. Gradijenti se mogu koristiti za pozadine, obrube i druge elemente na web stranicama. Izrađuju se pomoću funkcije CSS linear-gradient() i mogu imati višestruke stope i boje.
funkcija linear-gradient().
Funkcija linear-gradient() u HTML-u koristi se za stvaranje linearnog gradijenta boja. Uzima dvije ili više vrijednosti boja kao parametre i prikazuje glatki prijelaz između njih. Sintaksa funkcije linear-gradient() je:
linearni-gradijent(smjer, boja1, boja2, …);
Gdje je smjer kut gradijenta i može se odrediti pomoću ključnih riječi (npr. "prema vrhu" ili "prema dnu") ili pomoću kuta (npr. 45 stupnjeva). Boje su navedene ili kao imenovane boje (npr. "crvena"), heksadecimalne vrijednosti (npr. "#FF0000″), RGB vrijednosti (npr. "rgb(255, 0, 0)") ili HSL vrijednosti (npr. "hsl(0, 100%, 50%)”). Više boja može se specificirati odvajanjem zarezima i one će se pomiješati zajedno redoslijedom kojim su navedene na popisu parametara kako bi se stvorio gladak prijelaz između njih duž cijele linije gradijenta definirane vrijednošću parametra smjera koja joj je dana
Kako koristiti linearni gradijent na slici
Linearni gradijent može se koristiti na slici u HTML-u korištenjem svojstva background-image. Sintaksa za ovo je:
pozadinska slika: linearni gradijent(
Gdje je smjer smjer gradijenta, a boja1 i boja2 su dvije boje koje će se zajedno pomiješati. Na primjer, da biste stvorili linearni gradijent od vrha prema dolje s crvenom i plavom bojom, upotrijebili biste:
pozadinska slika: linearni gradijent (prema dnu, crvena, plava);
