CSS設(shè)置div背景圖的實(shí)現(xiàn)代碼

發(fā)布時(shí)間：2020-05-14 15:37:15 作者：Cathy

這篇文章主要介紹了CSS設(shè)置div背景圖的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

給組件添加背景圖控制只需要兩步：

<View
            className="gifts"
            style={{
              background: `url(${baseUrl}starMove/exclusiveEntrance/card.png) no-repeat`,
              backgroundSize: '100% 100%',
            }}
          >
          <View classname="gift-lists"></View>
</View>

設(shè)置background和backgroundSize。

style={

 width：100%；
 height：100%；
}

ps：下面給大家介紹下css文件如何使背景圖片大小適應(yīng)div的大小

對(duì)背景圖片設(shè)置屬性：background-size：cover;可以實(shí)現(xiàn)背景圖片適應(yīng)div的大小。

background-size有3個(gè)屬性：

auto：當(dāng)使用該屬性的時(shí)候，背景圖片將保持100% 的大小顯示，不進(jìn)行任何縮放。超過(guò)div的多余部分將被隱藏。當(dāng)圖片過(guò)小時(shí)，圖片會(huì)自動(dòng)平鋪。這種屬性通常用來(lái)做重復(fù)性的背景或者做半透明圖片背景。
cover：當(dāng)使用該屬性時(shí)，圖片將被縮放至恰好能覆蓋div，并且圖片被隱藏的部分最少，這種屬性在大圖背景中應(yīng)用比較廣泛。這點(diǎn)比較難理解，需要結(jié)合實(shí)踐理解。
contain：當(dāng)使用該屬性時(shí)，圖片被縮放至最大且能被完全展示出來(lái)，但是由于圖片的的尺寸比例與div的尺寸比例會(huì)有不同，所以當(dāng)圖片不能蓋住div時(shí)，圖片會(huì)自動(dòng)平鋪。

總結(jié)

到此這篇關(guān)于CSS設(shè)置div背景圖的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)css div 背景圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！