前言

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

html中如何設置默認圖片？

JS監聽

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

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

html中如何設置默認圖片？

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( [  |  ,]?  [, ]+ );

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

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

水平漸變

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

CSS水平漸變

左上角漸變

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

CSS左上角漸變

公告

閱讀更多 web秀 的文章

關鍵字: 技術 默認 地址