20230924 - CSS Background
CSS Background 單色
background: □;
□:#33ccff 色碼、Yellow 顏色名稱、RGB、CMYK
CSS Background 漸層
background-image: linear-gradient(𝘼, 𝘽);
background-image: linear-gradient(𝘼, 𝘽, 𝘾);
background-image: linear-gradient(𝘼, 𝘽, 𝘾, 𝘿);
background-image: linear-gradient(𝘼, 𝘽, 𝘾, 𝘿, 𝙀, 𝙁, ...);
顏色方向:由上而下
ex:background-image:linear-gradient(red, orange);
ex:background-image:linear-gradient(red, orange, yellow);
ex:background-image:linear-gradient(red, orange, yellow, green);
ex:background-image:linear-gradient(red, orange, yellow, green, blue, purple);
𝘼:red、𝘽:orange、𝘾:yellow、𝘿:green、𝙀:blue、𝙁:purple

background-image:linear-gradient(to top, 𝘼, 𝘽);
background-image:linear-gradient(to top, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↑
ex:background-image:linear-gradient(to top, #ffffff, #33ccff, #000000);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff

background-image:linear-gradient(to right, 𝘼, 𝘽);
background-image:linear-gradient(to right, 𝘼, 𝘽, 𝘾, ...);
顏色方向:→
ex:background-image:linear-gradient(to right, #ffffff, #33ccff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff

background-image:linear-gradient(to bottom, 𝘼, 𝘽);
background-image:linear-gradient(to bottom, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↓
ex:background-image:linear-gradient(to bottom, #ffffff, #33ccff, #000000);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image: linear-gradient(𝘼, 𝘽, 𝘾, ...); 相同

background-image:linear-gradient(to left, 𝘼, 𝘽);
background-image:linear-gradient(to left, 𝘼, 𝘽, 𝘾, ...);
顏色方向:←
ex:background-image:linear-gradient(to left, #ffffff, #33ccff, #000000);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff

background-image:linear-gradient(to top left, 𝘼, 𝘽);
background-image:linear-gradient(to top left, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↖
ex:background-image: linear-gradient(to top left, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff

background-image:linear-gradient(to top right, 𝘼, 𝘽);
background-image:linear-gradient(to top right, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↗
ex:background-image: linear-gradient(to top right, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff

background-image:linear-gradient(to bottom right, 𝘼, 𝘽);
background-image:linear-gradient(to bottom right, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↘
ex:background-image: linear-gradient(to bottom right, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff

background-image:linear-gradient(to bottom left, 𝘼, 𝘽);
background-image:linear-gradient(to bottom left, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↙
ex:background-image: linear-gradient(to bottom left, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff

background-image:linear-gradient(0deg, 𝘼, 𝘽);
background-image:linear-gradient(0deg, 𝘼, 𝘽, 𝘾, ...);
顏色方向:
ex:background-image: linear-gradient(0deg, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff

background-image:linear-gradient(90deg, 𝘼, 𝘽);
background-image:linear-gradient(90deg, 𝘼, 𝘽, 𝘾, ...);
顏色方向:
ex:background-image: linear-gradient(90deg, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff

background-image:linear-gradient(180deg, 𝘼, 𝘽);
background-image:linear-gradient(180deg, 𝘼, 𝘽, 𝘾, ...);
顏色方向:
ex:background-image: linear-gradient(180deg, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff

background-image:linear-gradient(135deg, 𝘼, 𝘽);
background-image:linear-gradient(135deg, 𝘼, 𝘽, 𝘾, ...);
顏色方向:
ex:background-image: linear-gradient(, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff