---
# System prepended metadata

title: CSS｜背景漸層｜Transparent Background Image with a Gradient
tags: [CSS]

---

---
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%);
```

![](https://i.imgur.com/NNAOzbS.png)

 

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

background-image: linear-gradient(to bottom, rgb(255, 99, 71) 60%, transparent 100%);
```
![](https://i.imgur.com/L6jon9j.png)
 

漸層方向-向上漸層：to top
>     background-image: linear-gradient(to top, rgb(255, 99, 71) 60%, transparent 100%);
![](https://i.imgur.com/AZ7iUXk.png)
 

漸層方向-向右漸層：to right
>     background-image: linear-gradient(to right, rgb(255, 99, 71) 60%, transparent 100%);
![](https://i.imgur.com/cyvFS7q.png)
 

漸層方向-向右下漸層：to bottom right
>     background-image: linear-gradient(to bottom right, rgb(255, 99, 71) 60%, transparent 100%);
![](https://i.imgur.com/w2dPC8Y.png)
 

綜合漸層
> ```
> 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%);
> ```
![](https://i.imgur.com/6LUUjhv.jpg)


 

---

參考資料：
* [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` `背景漸層`