#blogTitle新增背景
修改前：

修改後：

最終修改的程式碼：

#blogTitle{
    background-image:url(https://images.cnblogs.com/cnblogs_com/liulangbxc/1949195/o_210627081116pixelisland.jpg) ;
    background-size: cover;
    height:374px;
    padding: 40px 20px 10px;
    background-color: white;
    background-position: bottom -35px center;
}
 

padding調整的是標題與背景的相對位置

重點是background系列屬性：
background-image、background-position、background-size

background-image

該屬性屬性用於為一個元素設定一個或者多個背景影象。

background-image: url("../../media/examples/lizard.png"),
		url("../../media/examples/star.png");

在繪製時，影象以 z 方向堆疊的方式進行。先指定的影象會在之後指定的影象上面繪製。因此指定的第一個影象“最接近使用者”。
然後元素的邊框 border 會在它們之上被繪製，而 background-color 會在它們之下繪製。影象的繪製與盒子以及盒子的邊框的關係，需要在CSS屬性background-clip 和 background-origin 中定義。
如果一個指定的影象無法被繪製 (比如，被指定的 URI 所表示的檔案無法被載入)，瀏覽器會將此情況等同於其值被設為 none。
注意： 即使影象是不透明的，背景色在通常情況下並不會被顯示，web開發者仍然應該指定 background-color 屬性。如果影象無法被載入—例如，在網路連線斷開的情況下—背景色就會被繪製。

background-size

設定背景圖片大小。圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。

屬性值：

/* 關鍵字 */
background-size: cover
background-size: contain


/* 一個值: 這個值指定圖片的寬度，圖片的高度隱式的為auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto


/* 兩個值 */
/* 第一個值指定圖片的寬度，第二個值指定圖片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto


/* 逗號分隔的多個值：設定多重背景 */
background-size: auto, auto     /* 不同於background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain


/* 全域性屬性 */
background-size: inherit;
background-size: initial;
background-size: unset;
 

cover
縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見。
和 contain 值相反，cover 值儘可能大的縮放背景影象並保持影象的寬高比例（影象不會被壓扁）。
該背景圖以它的全部寬或者高覆蓋所在容器。當容器和背景圖大小不同時，背景圖的 左/右 或者 上/下 部分會被裁剪。
如下圖：

contain
縮放背景圖片以完全裝入背景區，可能背景區部分空白。
contain 儘可能的縮放背景並保持影象的寬高比例（影象不會被壓縮）。
該背景圖會填充所在的容器。當背景圖和容器的大小的不同時，容器的空白區域（上/下或者左/右）會顯示由 background-color 設定的背景顏色。
如下圖：

再新增一條屬性去除重複：background-repeat: no-repeat;
就會看到background-color了

背景圖片大小計算：

• 如果指定了 background-size 的兩個值並且不是auto：
  • 背景圖片按指定大小渲染。
• contain 或 cover:
  • 保留固有比例，最大的包含或覆蓋背景區。如果影象沒有固有比例，則按背景區大小。
• auto 或 auto auto:
  • 影象如果有兩個長度，則按這個尺寸。如果沒有固有尺寸與固有比例，則按背景區的大小。如果沒有固有尺寸但是有固有比例， 效果同 contain。如果有一個長度與比例，則由此長度與比例計算大小。如果有一個長度但是沒有比例，則使用此長度與背景區相應的長度。
• 一個為 auto 另一個不是auto:
  • 如果影象有固有比例，則指定的長度使用指定值，未指定的長度由指定值與固有比例計算。如果影象沒有固有比例，則指定的長度使用指定值，未指定的長度使用影象相應的固有長度，若沒有固有長度，則使用背景區相應的長度。

background-position

屬性值：

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

* 關鍵字center，用來居中背景圖片
* 關鍵字top、left、bottom、right中的一個用來指明圖片與背景框的哪一邊貼合，另一個維度則居中
* background-position: bottom -35px center;表示以bottom為參考系，背景圖片向下移35px,若值為正則是向上移動

另外需要注意，如果背景圖片的大小和容器一樣，那設定百分比的值將永遠無效，因為“容器和圖片的差”為0（圖片永遠填滿容器，並且圖片的相對位置和容器的相對位置永遠重合）。在這種情況下，需要為偏移使用絕對值（例如px）

參考：
https://juejin.cn/post/6855129007353462798
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position
配色：https://www.163.com/dy/article/G1C35S5E0516AKQ0.html