會 photoshop 的朋友應該都知道我們可以利用圖層混合效果讓圖片疊加的時候更多變化，這個以往需要靠繪圖軟體才能完成的效果，現在利用 CSS3 的 mix-blend-mode 也可以做到囉，要使用這個效果前我們需要先讓東西可以疊在一起，可以使用 html 的巢狀結構或是利用 position 來讓東西疊在一起都可以。
之後就可以設定在上面的那層套用 mix-blend-mode，可以套用的屬性與說明如下：
| Value | Description |
|---|---|
| normal | This is default. Sets the blending mode to normal |
| multiply | Sets the blending mode to multiply |
| screen | Sets the blending mode to screen |
| overlay | Sets the blending mode to overlay |
| darken | Sets the blending mode to darken |
| lighten | Sets the blending mode to lighten |
| color-dodge | Sets the blending mode to color-dodge |
| color-burn | Sets the blending mode to color-burn |
| difference | Sets the blending mode to difference |
| exclusion | Sets the blending mode to exclusion |
| hue | Sets the blending mode to hue |
| saturation | Sets the blending mode to saturation |
| color | Sets the blending mode to color |
| luminosity | Sets the blending mode to luminosity |
這邊給大家看一下實際的效果：
multiply:
screen:
difference:
目前各大瀏覽器除了 ie 外都支援了，就放心地用吧。
除了區塊外，背景也可以設定圖層混合效果，可以設定 background-blend-mode，值的話跟 mix-blend-mode 一樣，以下也來看看效果。
![[Tailwind CSS] 使用 Aspect Ratio 設置固定比例區塊](/assets/upload/1611643654838_0.jpg)
