Hlavním problémem souvisejícím s lineárním přechodem s obrázky je, že může být obtížné vytvořit plynulý přechod mezi obrázkem a přechodem. Lineární přechody se často používají k vytvoření pozadí pro obrázek, ale pokud barvy přechodu neodpovídají barvám obrázku, může to vypadat nepřirozeně nebo rušivě. Navíc může být obtížné ovládat a upravovat lineární přechody, aby bylo dosaženo požadovaného efektu.
<div style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.jpg');">
</div>
1. Tento řádek kódu vytvoří prvek div.
2. Atribut style je nastaven na obrázek pozadí s lineárním přechodem a adresou URL obrázku.
3. Lineární přechod má dvě barvy, obě jsou rgba černá s neprůhledností 0.5 (50 % průhledná).
4. Adresa URL obrázku je 'image.jpg'.
Co je gradient
Přechod v HTML je přechod mezi dvěma nebo více barvami. Lze jej použít k vytvoření hladkého přechodu z jedné barvy do druhé nebo z jednoho odstínu barvy do druhého. Přechody lze použít pro pozadí, okraje a další prvky na webových stránkách. Jsou vytvořeny pomocí funkce CSS linear-gradient() a mohou mít více zarážek a barev.
funkce linear-gradient().
Funkce linear-gradient() v HTML se používá k vytvoření lineárního přechodu barev. Jako parametry bere dvě nebo více barevných hodnot a zobrazuje plynulý přechod mezi nimi. Syntaxe funkce linear-gradient() je:
linear-gradient(direction, color1, color2, …);
Kde směr je úhel přechodu a lze jej určit pomocí klíčových slov (např. „nahoru“ nebo „spodu“) nebo pomocí úhlu (např. 45 stupňů). Barvy jsou specifikovány buď jako pojmenované barvy (např. „červená“), hexadecimální hodnoty (např. „#FF0000″), hodnoty RGB (např. „rgb(255, 0, 0)“) nebo hodnoty HSL (např. „hsl(0, 100 %, 50 %)“). Více barev lze určit tak, že je oddělíte čárkami a budou smíchány dohromady v pořadí, v jakém jsou uvedeny v seznamu parametrů, aby se mezi nimi vytvořil hladký přechod podél čáry přechodu definovaného hodnotou parametru směru, která jim byla přidělena.
Jak používáte lineární přechod na obrázku
Lineární přechod lze použít na obrázek v HTML pomocí vlastnosti background-image. Syntaxe pro toto je:
background-image: linear-gradient(
Kde směr je směr přechodu a barva1 a barva2 jsou dvě barvy, které budou smíchány dohromady. Chcete-li například vytvořit lineární přechod shora dolů s červenou a modrou barvou, použijte:
background-image: linear-gradient(to bottom, red, blue);
