---
tags: CSS
---

# CSS｜背景漸層｜Transparent Background Image with a Gradient

前情提要：「 最近在做公司專案，要製作導覽列(Navigation)，背景為有顏色的透明漸層。」

**有一個重點概念一定要知道**

**CSS 漸變實際上是一個圖像值，而不是顏色值。**
> CSS gradient is actually an image value, not a color value as some might expect

> 所以必須使用 background-image
不能直接使用 background-color

我測試了許多寫法，最後得出以下比較可行的撰寫方式。

background-image: linear-gradient(to bottom, #4E3629 60%, transparent 100%);


 

顏色方面也可以選用 rgb( , , )

background-image: linear-gradient(to bottom, rgb(255, 99, 71) 60%, transparent 100%);

 

漸層方向-向上漸層：to top
> background-image: linear-gradient(to top, rgb(255, 99, 71) 60%, transparent 100%);
 

漸層方向-向右漸層：to right
> background-image: linear-gradient(to right, rgb(255, 99, 71) 60%, transparent 100%);
 

漸層方向-向右下漸層：to bottom right
> background-image: linear-gradient(to bottom right, rgb(255, 99, 71) 60%, transparent 100%);
 

綜合漸層
> ```
> background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
> linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
> linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
> ```

 

---

參考資料：
* [Transparent Background Image with a Gradient](https://stackoverflow.com/questions/5681813/transparent-background-image-with-a-gradient)
* [postcss-gradient-transparency-fix](https://github.com/gilmoreorless/postcss-gradient-transparency-fix)
* [linear-gradient｜MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient())

---
###### tags: `CSS` `gradient` `background-image` `background-color` `背景漸層`