# Background ###### tags: `Component` <style> .red{ color:red; } </style> ## 一 . Banner版 ### (一) . 成果圖 #### 1. 效果 ： - 左邊有一個顏色區框，可以填入我想要的內容。 - 右邊為一個圖片區域，可以填入我需要的產品圖片。 ![](https://i.imgur.com/kEnb73s.jpg) #### 2. 實作概論 ： **<span class="red">多重背景的應用</span>** - 為兩個背景的疊加 ： - 背景一為顏色漸層 ： 由有顏色到透明的內容。 ![](https://i.imgur.com/cmQzwVh.png =300x) - 背景二為圖片 ： 在背景一之下，因為背景一的透明而顯示出來。 ![](https://i.imgur.com/tJGuZ2A.jpg =300x) - 基本技巧 ： - background properity : 兩個背景的疊加。 - liner-gradient : 背景一的漸層使用。 ### (二) . 實作方法 - $step\ 1$ : 決定背景，設我們要改變背景的class為banner。 ```htmlembedded= <body> <div class="banner"> <!--- 可以加入文字 ---> </div> </body> ``` - $step \ 2$ : 重點是如何設定```background```，其他三個設定是讓banner滿版而已。 1. 多重背景設定 ： 用逗號隔開多個背景，前面的會在上面。 2. 設定背景一 ： 設定線性梯度，於中間的時候結束顏色和透明度，可以達到二分的感覺。 3. 設定背景二 ： 將圖片向右靠前，且滿版視窗，才不會有圖片大小不足兒重複的問題。 ```css= .banner{ width: 100%; height: 100vh; background-color: #ccc; background: linear-gradient(115deg, #7bf 50%, transparent 50% ), url("https://picsum.photos/1200/600?random=10") right / 100% 100%; } ``` ### (三) . 使用語法 - ```background```語法 ： 1. 用逗號間格多個可能需要使用的背景。 2. 每個背景可以設定成 ：``` 顏色(圖片) 對齊方向 / 寬高```。 3. 如上面圖片的內容就是 ： url(圖片) right(向右靠) / 寬高都滿版。 - ```liner-gradient```語法 ： - 包含三部分 ：``` 旋轉角度 , color-stop1 , color-stop2``` 。 - 旋轉角度 ： 渲染軸的角度改變，原本渲染軸為平面的y座標，由下為開始，向上渲染。 - color-stop1 (x%): 代表從x％的位置此顏色停止渲染，若前後有顏色的話，就會進入漸層，沒有的話，則都會是這個顏色。 ## 二 . 混色漸層背景 ### (一) . 成果圖 ![](https://i.imgur.com/KihlxnX.jpg) - 用到定位。 - 用到css的 $filter$ 屬性。 ### (二) . 作法 #### $step1$ - 定位 ： 用postion在背景加入四塊顏色矩型。 - 顏色塊得位置會影響混色的效果。 - 可以先在父元素用一個漸層刷過。 ![](https://i.imgur.com/OS2VVbq.png) ```htmlmixed= <div class="app"> <div class="background-block"></div> <div class="background-block"></div> <div class="background-block"></div> <div class="background-block"></div> </div> ``` ```css= .app{ position: relative; display: flex; flex-direction: column; align-items: center; height: 100vh; width: 100vw; background: linear-gradient(to bottom, #f1f4f9 15%, #cfe7fa 50%); } .background-block{ position: absolute; } .background-block:nth-child(1){ top: -10vh; min-height : 40vh; min-width : 50vw; background: #ff3d8e } .background-block:nth-child(2){ top: 50vh; left: 10vw; min-height : 30vh; min-width : 80vw; background: #fdff74; } .background-block:nth-child(3){ top: 45vh; left: 10vw; min-height: 25vh; min-width : 25vw; background: #3f99ff } .background-block:nth-child(4){ top:45vh; right:10vw ; min-height: 25vh; min-width : 25vw; background: #4ea0ff } ``` #### $step2$ - 加入 : 加入fliter屬性設為blur即可。 - blur的radius大一點可以讓顏色散的比較開，背景比較不會突兀。 - 這邊用三原色去混，比較不會難看(洋紅、黃、青)。 ```css= .background-block{ position: absolute; filter: blur(200px); } ``` ### (三) . 技巧 - blur的radius太小時會太突兀。 1. blur中的值代表暈開的幅度。 2. 值太小的時候，顏色不會散開，背景會變成一塊一塊的。 ![](https://i.imgur.com/IxduAuC.jpg =450x) - blur值太大會有灰灰的顏色出現。 1. 看三原色的圖可以知道，當三種顏色都有的時候，會變成黑色。 2. 所以blur值太大，讓三種顏色深淺相同的地方重疊太多，會變灰灰的。 3. 但blur值大時，也可以讓整體演色變很淡，淡到沒有太明顯的灰色 ![](https://i.imgur.com/KihlxnX.jpg =450x) - position定位的位置直接影響後面暈開的效果。 1. 兩個顏色在線性混成的效果比較好。 2. 兩個顏色在放射性混成的效果比較糟。