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 left, 𝘼, 𝘽, ...);
顏色方向:
ex:background-image:linear-gradient(to top left, #ffffff, #33ccff, #000000);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff

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

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

background-image:linear-gradient(to right, 𝘼, 𝘽, ...);
顏色方向:
ex:background-image:linear-gradient(to right, #ffffff, #33ccff, #000000);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image:linear-gradient(to , 𝘼, 𝘽);
background-image:linear-gradient(to , 𝘼, 𝘽, 𝘾, ...);
顏色方向:
ex:background-image: linear-gradient(to , #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