0035 如何設置網頁背景圖和在網頁中插入圖片

上節課講了關於表格的一些更多知識和用表格配合div來進行網頁排版。

這節課開始講關於網頁圖片的相關知識。

上節課的課後練習

1.去網上搜索2個自己喜歡的圖片，1個圖片用來作為整個網頁的背景，另一個圖片可以進行重疊組成網頁的背景。

學哥找了2個大尺寸的圖片和2個小尺寸圖片，如下圖目錄所示：

在index.html所在的目錄下創建一個images目錄，將4個圖片全部放進去。

2.給技術經驗的表格增加一個表頭，標題分別是：技術類別，技術點，經驗年數。文字加粗顯示。

在技術經驗的表格的第一行增加一個tr，裡面增加3個td，然後複製一個CSS樣式td1，改名為tdh，增加設置文字粗體，背景色設置為淡灰色。

css代碼修改如下：

html代碼修改如下：

刷新頁面：

可以看到，表頭的文字加粗，並且背景色為半透明淺灰色。

設置tdh的background-color:rgba(200,200,200,0.6);，這是一個新的寫法，通過CSS的函數rgba可以設置一個RGBA顏色，這種顏色值帶有一個alpha通道，可以設置顏色的透明度，也就是可以透過當前顏色的比率是多少。

RGBA 顏色值是這樣規定的：rgba(red, green, blue, alpha)。alpha 參數是介於 0.0（完全透明）與 1.0（完全不透明）的數字。

rgba(200,200,200,0.6);就是一個灰色的，透明度為0.6的一個半透明淺灰色。

因為整個body的背景色也是灰色的，因此這裡就看不出來tdh的背景色是半透明的，可以來調整body的背景為一個圖片，就能看出來是半透明的了。

設置背景圖片

之前講了通過設置body的background-color屬性來設置整個網頁的背景色。

背景色設置有時候局限性比較大，很多網站都採用圖片來設置背景圖片，可以做到讓網頁更美觀。

設置背景圖片的CSS屬性是像這樣的：

background-image: url(./images/background.jpg);

url是一個CSS函數，裡面參數是圖片的目錄路徑。

一般採用相對目錄路徑，也就是假設index.html存放在哪一個目錄下，則在這個目錄下創建一個images目錄，將background.jpg文件放到images目錄裡面去。

修改css文件的body的樣式，增加background-image，同時刪除bigtitle的width屬性，因為div默認就是寬度為100%，為了防止該屬性對背景圖片的干擾，所以刪除掉不必要的屬性。

css代碼修改如下：

刷新頁面：

可以看到技術經驗的表格的背景色是半透明的，但是4個大標題的背景色不是半透明的，將它也改為半透明色。

修改CSS樣式bigtitle的background-color屬性值為半透明顏色值。

css代碼修改如下：

刷新頁面：

可以看到，大標題的背景色都是半透明的顏色了，這樣看起來比較美觀了。

但是發現一個問題，由於背景圖片的寬度正好是自動適應瀏覽器的寬度的，因此相應的高度不一定能正好完全填滿瀏覽器的高度，因此背景圖片默認是自動向y軸方向進行重複顯示的，顯示的高度根據當前顯示的內容的高度來自動截斷。

因此可以看到有一個明顯的界限，就是圖片開始重複顯示了。

有2種辦法解決這個不好的顯示，一種是做一個比較高的圖片，另一種方法是做一個圖片最下方的圖形顏色和最上方的圖形顏色非常接近或相同的圖片，這樣圖片在重複顯示的時候，就看不出明顯的界限了。

設置可以重複的背景圖片

前面從網路上找到了，可以重複顯示的背景圖片，下面修改背景圖片看看效果如何。

css代碼修改如下：

刷新頁面：

img標籤和屬性

背景圖片是一個有效改變網頁顯示效果的方法，而圖片更是一個網站上最常用的元素，利用好圖片，可以讓網頁看起來更簡潔美觀大氣，簡稱「高大上」。

現在就來講講如何在網頁中添加圖片元素。

計劃這樣修改網頁：在技術經驗右側增加一個「成果展示」的部分，先修改成類似「工作經歷」和「工作經驗（部分）」一樣，用表格來進行排版，然後在「成果展示」裡面增加2個圖片，用來展示曾經做過的項目成果物。

首先，修改「技術經驗」部分，修改為一個2行2列的表格，並添加「成果展示」的大標題部分。

利用前面的table，將table最後一行</td></tr></table>註釋掉不用了，然後修改為增加新的tr行，參照前面的寫法，再增加2行2列。

html代碼修改如下：

刷新頁面：

可以看到出現了新的版塊「成果展示」。裡面有2個成果說明。

增加2個圖片

首先準備好2個圖片，圖片格式可以是jpg,png,gif等等，講圖片存放到images目錄下。

然後修改html代碼，使用img標籤來添加圖片，使用形式是這樣的：

<img src="url"/>

img標籤是空標籤，類似於之前的<br/>標籤。它只包含屬性，並且沒有閉合標籤。

使用屬性src來設置要顯示的圖像URL地址。

這裡的URL地址可以是一個本地的路徑和文件名，也可以是一個網路URL地址。

例子：

<img src="./images/coke12.png"/> 顯示當前html文件同目錄下的images目錄下的coke12.png圖片文件。

<img src="http://www.w3school.com.cn/images/boat.gif"/>顯示一個網站的圖片網路地址。

來增加成果展示的圖片，修改html代碼如下：

刷新頁面：

可以看到第1個圖片顯示的非常成功。這裡要注意在img標籤設置了屬性width="100%"，這裡的寬度是指相對於img標籤元素的父元素而言的，並不是指相對於整個瀏覽器的寬度。也就是前面說過的標籤元素的屬性繼承關係要非常清楚。

大家可以把width="100%"這個屬性去除，刷新頁面看看，體驗一下。

第2個圖片使用了一個網路地址，大家如果將這個網路地址直接複製到瀏覽器的地址欄裡面去訪問的話，會發現這個圖片文件是不存在的。所以這裡的網頁上會呈現一個小圖標，表示圖片資源文件不存在的意思是。

可以通過給img標籤設置alt屬性的方式來給圖像定義一串預備的替換文本，當瀏覽器無法載入圖像時，瀏覽器會顯示這個文本而不是圖像。給頁面上的圖像都加上替換文本是一個好習慣，這樣有助於更好的顯示信息。

給2個圖片都加上alt屬性，修改html代碼如下：

刷新頁面：

可以看到第2個圖片顯示了替換文本。

圖片不存在，終歸是要修改的，來把圖片修改為一個存在的文件。

修改html代碼如下：

刷新頁面：

可以看到這個圖片是一個gif圖片，有動畫效果的。

HTML註釋和CSS註釋

剛才有一行代碼：<!--</td></tr></table>--> 比較特殊，這是一個HTML註釋標籤。

註釋標籤的格式 <!-- 此處是註釋文字 -->，當中的註釋內容是可以多行的。

註釋標籤的開始標籤有一個驚嘆號，結束標籤中沒有。

瀏覽器不會顯示註釋內容，類似於python代碼中用#註釋一行不會被執行的代碼。

註釋標籤的作用，一般都是用來記錄或者說明代碼的用途作用等等給程序員來閱讀的。

也可以臨時保存暫時用不到的代碼，方便以後可能的使用。

將html代碼中的<!--</td></tr></table>-->這行刪除，這裡不需要保留了。

前面說明了HTML註釋，同樣的CSS也可以添加註釋。

使用//兩個斜杠符號對單行CSS代碼進行註釋。

使用/* 註釋內容 */對單行或者多行CSS代碼進行註釋。以「斜杠+型號」開始，「星號+斜杠」結束，均為英文半形小寫。

一般都使用/* */進行註釋，這個包含了單行註釋，比較方便。

註釋掉的CSS樣式將不會體現在瀏覽器網頁樣式顯示。

下面來驗證一下CSS註釋。

學哥覺得這次選擇的背景圖片不是太美觀，還是之前的淡灰色的背景色比較美觀大氣，因此打算修改CSS文件的body的background設置，但是又不確定以後如果找到了更合適的背景圖片，可能還會修改為背景圖片，因此，可以暫時把代碼註釋掉，說不定以後會用的著。

css代碼修改如下：

刷新頁面：

關於代碼縮進

代碼寫到現在，雖然只有2個文件，但是內容已經不少了。html文件有64行，css文件有100行。

大家可能發現，學哥的html代碼沒有注意縮進，也就是標籤元素的層次沒有通過縮進來顯示。

這是因為，學哥為了截圖的時候盡量讓代碼文字大一些，為了讓大家看代碼的時候不容易看錯，而特意設置了一行文本最多顯示60個英文字元。如果在每行前面再增加縮進，那麼一行文字能夠實際顯示的字元數就更少了，迫不得已，學哥只能放棄縮進，讓每行文字都頂格寫。雖然這樣寫代碼看起來不太美觀，但學哥因為編程經驗豐富，出錯的可能性是比較小的。

那麼對於初學者來說，一定要按照規範每一行都要縮進，讓代碼的層次更清楚。

下面學哥將2種書寫代碼的方式都截圖，大家對比一下看看。一定注意要按照規範的縮進格式來編寫代碼，從而減少錯誤。

不規範的html代碼（字大能看的更清楚）：

不規範的的css代碼（字大能看的更清楚）：

規整的html代碼（字小看不太清楚）：

規整的css代碼（字小看不太清楚）：

課後練習

準備做2個新的網頁，設計好裡面的文字內容和圖片。

往期教程

因為教程是系列教程，前後關聯性非常強，請大家按照微信公眾號【零基礎學編程】的歷史消息發布時間先後次序進行閱讀。