Riješeno: linearni gradijent sa slikom

Glavni problem u vezi sa linearnim gradijentom sa slikama je taj što može biti teško stvoriti neprimjetan prijelaz između slike i gradijenta. Linearni gradijenti se često koriste za kreiranje pozadine za sliku, ali ako se boje gradijenta ne poklapaju s onima na slici, može izgledati neprirodno ili uznemirujuće. Pored toga, linearne gradijente može biti teško kontrolisati i prilagoditi kako bi se postigao željeni efekat.

<div style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.jpg');">
</div>

1. Ova linija koda stvara div element.
2. Atribut style je postavljen na pozadinsku sliku sa linearnim gradijentom i URL-om slike.
3. Linearni gradijent ima dvije boje, od kojih su obje rgba crne sa neprozirnošću od 0.5 (50% transparentno).
4. URL slike je 'image.jpg'.

Šta 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. Gradijent se može koristiti za pozadine, ivice i druge elemente na web stranicama. Kreiraju se pomoću funkcije CSS linear-gradient() i mogu imati višestruke stope i boje.

linear-gradient() funkcija

Funkcija linear-gradient() u HTML-u se koristi za kreiranje linearnog gradijenta boja. Uzima dvije ili više vrijednosti boja kao parametre i prikazuje glatki prijelaz između njih. Sintaksa za funkciju linear-gradient() je:

linearni gradijent (pravac, boja1, boja2, …);

Gdje je smjer ugao gradijenta i može se specificirati pomoću ključnih riječi (npr. “na vrh” ili “do dna”) ili korištenjem ugla (npr. 45 stepeni). Boje su specificirane 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 se može navesti tako što ćete ih odvojiti zarezima i one će biti spojene zajedno u redoslijedu kojim su navedene na listi parametara kako bi se stvorio glatki prijelaz između njih duž cijele linije gradijenta definirane vrijednošću parametra smjera koja joj je data

Kako koristiti linearni gradijent na slici

Linearni gradijent se može 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 pomiješati. Na primjer, da biste kreirali linearni gradijent od vrha do dna s crvenom i plavom bojom, koristili biste:

background-image: linearni gradijent (do dna, crveno, plavo);