Css3之background-image的深層次理解

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

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

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

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

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

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

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

第四種方法：設(shè)置背景圖像組

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

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

新聞名稱：Css3之background-image的深層次理解
標(biāo)題URL：http://www.muchs.cn/news0/311600.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、品牌網(wǎng)站設(shè)計(jì)、服務(wù)器托管、動(dòng)態(tài)網(wǎng)站、企業(yè)建站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)