我們大家都知道，background-image這個屬性是用來設置背景圖片的，一般的寫法是background-image:url()。這種寫法也是最常用最普遍的方法，可以直接調用圖片地址，簡單又快捷。但是人力有時窮，何況區區一個屬性?下邊，我再給大家介紹幾種background-image屬性的設置方法，希望能幫助大家加深對這個屬性的理解。

第一種方法：用background-image:url()

這種方法是大家最常用的方法，大部分都會用，我也就不再多家贅述。直接上干貨

第二種方法：用base64編碼，直接設置背景圖像

這種方法的寫法是：bakeground-image:url(base64)。這種方法是直接把圖片轉化成base64編碼鑲嵌到網頁中，用這種方法設置的背景圖片，可以減少一個http請求，積少成多，有利于前端優化。但是這種方法也有自己的缺點，base64編碼太過冗長，不適用于將太大的圖片轉換成base64編碼。那么該如何將圖片轉化成base64編碼呢?這就需要用到編碼轉化工具了。大家可以自己到腳本之家在線工具頁面去尋找，也可以直接訪問這個頁面：http://tools.jb51.net/transcoding/base64。

第三種方法：用漸變顏色作為背景圖像

在我們的潛意識里，往往會將漸變顏色誤認成是顏色的一種。其實不然，漸變顏色在處理時，是被當成圖片處理的。也就是說，在使用漸變顏色的時候，把它當成圖片去使用就可以了。根據漸變顏色的這個特性，我們可以用漸變顏色來指定某一元素的背景圖像。寫法是：background-image:radial-gradient()

第四種方法：設置背景圖像組

在我們進行網頁設計的過程中，有時可能會碰到一個地方需要使用好幾個背景圖片的情況。那這時我們該怎么辦呢?難道要分別使用兩個background-image屬性，然后定義兩個背景圖片嗎?一旦這樣設置的話，后一個設置的background-iamge屬性值，就會直接把前一個覆蓋掉，是不能設置成功的。解決這種問題的方法就是設置背景圖像組，其設置方法是：bakeground-image:url(1),url(2),url(3)。哪個圖片地址寫在前面，哪個圖片就會出現上邊。用這種方法定義背景圖片，就可以給同一個元素定義多個背景圖片而不會相互覆蓋，可以做出很多有意思的效果來。

以上就是今天給大家介紹的background-image屬性的幾種使用方法，希望大家看過這篇文章之后，能獲得新的感悟，總結出新的經驗，謝謝大家的觀看。

新聞名稱：Css3之background-image的深層次理解
標題URL：http://m.2m8n56k.cn/news0/311600.html

成都網站建設公司_創新互聯，為您提供虛擬主機、品牌網站設計、服務器托管、動態網站、企業建站、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯