CSS：背景圖片的使用（將背景圖片完美適合窗口 & 創建三角背景圖片 & 在背景圖片上添加漸變疊加 & 製作網格背景圖片 & 文字鏤空背景圖片效果）

1. 如何將背景圖片完美的適合瀏覽器窗口？

• background-position: center;
• background-attachment: fixed;
• background-size: cover;

2. 如何在CSS中使用多個背景圖片？

用 , 分隔。

background-image: url(圖片1路徑), url(圖片2路徑);
background-position: 圖片1position, 圖片2position;
……

3. 如何創建三角背景圖片？

效果圖：

通過創建兩個 div 來完成此操作，需要向兩個視圖均添加背景圖像，第二個 div 需要具有 clip-path 屬性以創建三角形。

4. 如何在背景圖片上添加漸變疊加？

• linear-gradient

5. 如何創建變色背景圖像動畫？

• @keyframes 添加動畫
• animation-name 屬性爲 @keyframes 動畫規定一個名稱
• animation-duration 屬性定義動畫完成一個週期所需要的時間，以秒或毫秒計。

6. 如何製作網格背景圖片？

• 什麼是 CSS 網格
• Grid 網格佈局
• display: grid 指定一個容器採用網格佈局
• grid-template-columns 屬性定義每一列的列寬
• grid-template-rows 屬性定義每一行的行高
• grid-gap 屬性是 grid-column-gap 和 grid-row-gap 的合併簡寫形式

  grid-row-gap 屬性設置行與行的間隔（行間距），grid-column-gap 屬性設置列與列的間隔（列間距）。

• fr 單位是一個自適應單位，被用於在一系列長度值中分配剩餘空間，如果已指定了多個部分，則剩下的空間根據各自的數字按比例分配。

7. 如何將背景圖片設置爲文本顏色？

即文字鏤空背景圖片效果。

• 給文字加上背景圖片 background-image
• 利用 background-clip 屬性規定背景的繪製區域。

📦 代碼

代碼詳情見 codeopen：https://codepen.io/collection/AMzJNd