言

大家可能都知道img標簽是怎么設置默認圖片的，但是你知道background-img是如何設置默認圖片的嘛？

JS監聽

<img src="圖片的url地址" alt="圖片描述" onerror="this.src='默認圖片的url地址'"/>

這里是應用了img標簽的onerror事件，當加載失敗就用默認圖片地址。但是這里可能出現如果默認圖片地址也加載不出來，或者失敗，在IE內核的瀏覽器下就會反復加載，出現死循環，最后造成堆棧溢出錯誤。因此， 需要用下面兩種方法解決：

1. 更改 onerror 代碼為其它處理方式或者確保 onerror 中的默認圖片足夠小，并且存在。
2. 控制 onerror 事件只觸發一次，需要增加這句話：this.onerror=null。

<img src="圖片的url地址" alt="圖片描述" onerror="this.src='默認圖片的url地址';this.onerror=null"/>

background-img

background是可以設置多個背景圖片的，最前面的優先級越高，所以如果javan1.jpg沒有就好顯示第二個javan2.jpg，如果還沒有就好顯示第三個javan3.jpg。

第一種：

background: url("javan1.jpg") 0 0 no-repeat,
 url("javan2.jpg") 200px 0 no-repeat,
 url("javan3.jpg") 400px 201px no-repeat;

第二種：

background-image: url("javan1.jpg"), url("javan2.jpg"), url("javan3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat; 
background-position: 0 0, 200px 0, 400px 201px;

需要注意的是：IE8及更早瀏覽器不支持CSS3 background-image，即不支持多背景和使用漸變作為背景圖像。

拓展-CSS漸變

background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

上面這種CSS語法我們經常見到，可能有人看不懂具體的意思，其實上面的些符號含義與正則表達式有很多一致之處：

1. [] 在正則中表示一個字符類，這里，你可以理解為一個小單元。
2. | 表示候選。也就是“或者”的意思，要么前面的，要么就后面的。
3. ? 為量詞，表示0個或1個，言外之意就是，你可以不指定方向，直接漸變色走起。
4. + 也是量詞，表示1個或者更多個。因此，終止顏色是不可缺少的。例如：linear-gradient(red)是醬油命，白板。
5. <> 中的是關鍵字，主要是讓開發人員知道這里應該放些什么內容。

水平漸變

{
 background-image: linear-gradient(left, red 100px, yellow 200px);
}

左上角漸變

{
 background-image:linear-gradient(left top, red 100px, yellow 200px);
}

公告

喜歡小編的點擊關注，了解更多資源！

全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。

主要內容：這是HTML課程的第五課，主要講解HTML的圖片和超鏈接。讓自己設計的網頁更加多元素。

上節回顧

在上節中主要講解了HTML的文字標簽和格式標簽。上篇請戳→→04程序員定要學HTML，字體段落標簽介紹，60秒搞定

其實如果沒有記住也無所謂。畢竟這些標簽都是HTML中比較常用的，在以后的相關的案例中也會使用。此系列教程主要講解HTML從基礎到精通。自己能夠設計一個完整的前端網頁項目。

程序員寫代碼

圖片

在HTML中添加圖片其實很簡單，就是添加一個img的標簽。

圖片標簽的語法

一般有src、alt、width、height四種屬性就夠用了。

效果：

圖片的顯示效果

圖片路徑的寫法

src表示的是圖片的路徑，這里面的值應該怎么寫呢？

（1）html文件和圖片在相同一個文件夾下。

HTML文件和圖片文件在相同的目錄下，可以直接書寫文件的名稱。

寫文件名的寫法，如上面的HTML

（2）圖片在HTML文件所在目錄的文件夾內：

如圖：

圖片文件在文件夾內

此時需要加上文件夾名稱，并加上“/”表示下層目錄：

下層目錄的圖片寫法

（3）圖片文件在上層目錄

如果圖片在HTML文件所在的上層目錄，則需要寫“..”表示向上一級。如圖：

上層目錄

超鏈接

超鏈接就是可以鏈接到某個資源的東西，比如我們打開百度首頁搜索后，產生的就是超鏈接：

這些藍字超鏈接

這些藍色的文字標題，我們點擊之后可以跳轉到新的網站。這就是超鏈接。下面我們自己寫一個超鏈接：

超鏈接的寫法

超鏈接預覽

超鏈接中的屬性

超鏈接中的潮涌屬性包括：href（網頁地址）、title（說明描述）、target（打開網頁的位置）、name（名稱）。

其中href支持帶有任何協議的連接。title是對超鏈接的說明。

程序員

target包括四個值：

_blank

在新的窗口打開連接

_self

在當前窗口打開超鏈接

_parent

在父窗口打開超鏈接，這個后面會說，不常用

_top

在整個窗口中打開被鏈接文檔。

每天一個知識點，帶你邁向軟件編程大神，一起努力吧。