Source Url

學習點

1. 解決因 flex 造成子層元素高度填滿父層的問題

影片 6:50 的部分，當父層有 display:flex 的屬性，會使得其內部子層元素自動填滿父層的寬或高，是填滿寬或高就是取決於父層的 flex-direction 屬性是什麼，也就是資料流的方向。

所以，跟著影片一路到 6:50 ，會發現 banner-txt h1 的 border-bottom 會填滿整個父層的寬，也就是我們上面提到的部分。
結果會長得像下面這樣

那解決的辦法為在 banner-txt 也就是父層中加入 align-items: flex-start 就可以解決這個填滿父層的問題囉 (在 Amos 的教學影片 1:13:32 有提到這部分的功能)。

.banner-txt {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start; // 加這一行
}

改正後的畫面

以上就修正完畢囉~

2. 如何呈現斜的分隔線

這堂課的範例會有一個斜的分隔線，將文字區和圖片區切開，是利用 background 的 linear-gradient 來達成的
寫法如下

.banner {
	background: linear-gradient(115deg, #7bf 50%, transparent 50%) center center /
      100% 100%
}

接下來，就來剖析一下 linear-gradient 這些參數都是什麼意思
第一個角度參數 115 deg 是代表要朝哪個角度作為顏色漸層的方向

第二個 #7bf 50% 是代表由 #7bf 這個顏色開始做漸層，50% 是代表起始色位置，所以，0-50% 都會是 #7bf 的顏色

第三個參數 transparent 50% 代表終止色為 transparent 也就是透明，50% 是代表終止色位置，所以，50% - 100% 都會是透明無色。

因為，起始色位置和終止色位置是同一個，而且角色是 115deg ，就可以達到有一個斜線，其中一半的顏色全部都是 #7bf，另外一半就都是空白的囉。

那剩下的 center center / 100% 100% ，分別為 background-position 和 background-size 的屬性值，它們彼此之間會用 / 來區隔。
拆解來看就等於 background-position: center center 代表背景要水平居中，垂直居中，
background-size : 100% 100% (前面為寬，後面為高) 代表背景的寬高分別等於父層的寬度和高度。

最後畫面是

3. 如何呈現背景圖佔滿剩餘另外一半的效果

上面第二點有講到了，如何達成斜的分隔線一半是 #7bf 而另外一半是空白無色的效果。

那這邊的話，是要剖析將空白無色的那一半用圖片來填滿。
其實， background 可以設定多層的 background ，只是彼此之間要用逗號 , 分開。
那我們就來將背景圖的部分加入進去吧

.banner {
	background: 
		linear-gradient(115deg, #7bf 50%, transparent 50%) center center / 100% 100%,
		url('https://picsum.photos/1200/600?random=10') right center / auto 100%;  // 加了一張背景圖
}

那一樣來剖析一下，加入的那一行屬性在幹嘛，
首先，url('https://picsum.photos/1200/600?random=10') 這是 background-image 的屬性值
剩下的 right center / auto 100%，分別是 background-position 和 background-size 的屬性值了
拆解來看就等於 background-position:right center 代表背景要水平居右，垂直居中
background-size : auto 100% 代表背景的寬度會是圖片自己本身的寬度，剩下的 100%，就是代表背景圖片高度等於父層的高度。

Final Result

練習連結

Landy Blog

CSS-金魚系列切版-圖文滿版區塊

Source Url

學習點

1. 解決因 flex 造成子層元素高度填滿父層的問題

2. 如何呈現斜的分隔線

3. 如何呈現背景圖佔滿剩餘另外一半的效果

Final Result

Reference