Background

tags: `Component`

(一) . 成果圖

1. 效果：

左邊有一個顏色區框，可以填入我想要的內容。
右邊為一個圖片區域，可以填入我需要的產品圖片。
Image Not Showing Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →

2. 實作概論：多重背景的應用

為兩個背景的疊加：
- 背景一為顏色漸層：由有顏色到透明的內容。
  Image Not Showing Possible Reasons
  The image file may be corrupted
  The server hosting the image is unavailable
  The image path is incorrect
  The image format is not supported
  Learn More →
- 背景二為圖片：在背景一之下，因為背景一的透明而顯示出來。
  Image Not Showing Possible Reasons
  The image file may be corrupted
  The server hosting the image is unavailable
  The image path is incorrect
  The image format is not supported
  Learn More →
基本技巧：
- background properity : 兩個背景的疊加。
- liner-gradient : 背景一的漸層使用。

(二) . 實作方法

$s t e p 1$ : 決定背景，設我們要改變背景的class為banner。





<body>
    <div class="banner">
     <!--- 可以加入文字 --->
    </div> 
</body>

$s t e p 2$ : 重點是如何設定background，其他三個設定是讓banner滿版而已。
1. 多重背景設定：用逗號隔開多個背景，前面的會在上面。
2. 設定背景一：設定線性梯度，於中間的時候結束顏色和透明度，可以達到二分的感覺。
3. 設定背景二：將圖片向右靠前，且滿版視窗，才不會有圖片大小不足兒重複的問題。









.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％的位置此顏色停止渲染，若前後有顏色的話，就會進入漸層，沒有的話，則都會是這個顏色。

二 . 混色漸層背景

(一) . 成果圖

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

用到定位。
用到css的
$f i l t e r$ 屬性。

(二) . 作法

$s t e p 1$ - 定位：用postion在背景加入四塊顏色矩型。

顏色塊得位置會影響混色的效果。
可以先在父元素用一個漸層刷過。
Image Not Showing Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →






<div class="app">
        <div class="background-block"></div>
        <div class="background-block"></div>
        <div class="background-block"></div>
        <div class="background-block"></div>
</div>





















































.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
}

$s t e p 2$ - 加入 : 加入fliter屬性設為blur即可。

blur的radius大一點可以讓顏色散的比較開，背景比較不會突兀。
這邊用三原色去混，比較不會難看(洋紅、黃、青)。




.background-block{
    position: absolute;
    filter: blur(200px);
}

(三) . 技巧

blur的radius太小時會太突兀。
1. blur中的值代表暈開的幅度。
2. 值太小的時候，顏色不會散開，背景會變成一塊一塊的。
blur值太大會有灰灰的顏色出現。
1. 看三原色的圖可以知道，當三種顏色都有的時候，會變成黑色。
2. 所以blur值太大，讓三種顏色深淺相同的地方重疊太多，會變灰灰的。
3. 但blur值大時，也可以讓整體演色變很淡，淡到沒有太明顯的灰色
  Image Not Showing Possible Reasons
  The image file may be corrupted
  The server hosting the image is unavailable
  The image path is incorrect
  The image format is not supported
  Learn More →
position定位的位置直接影響後面暈開的效果。
1. 兩個顏色在線性混成的效果比較好。
2. 兩個顏色在放射性混成的效果比較糟。

Background

tags: Component

一 . Banner版

(一) . 成果圖

1. 效果 ：

2. 實作概論 ： 多重背景的應用

(二) . 實作方法

(三) . 使用語法

二 . 混色漸層背景

(一) . 成果圖

(二) . 作法

step1 - 定位 ： 用postion在背景加入四塊顏色矩型。

step2 - 加入 : 加入fliter屬性設為blur即可。

(三) . 技巧

Read more

Note : 常見佈局分析一

Side Bar

Modal

Card

tags: `Component`

1. 效果：

2. 實作概論：多重背景的應用

$s t e p 1$ - 定位：用postion在背景加入四塊顏色矩型。

$s t e p 2$ - 加入 : 加入fliter屬性設為blur即可。