CSS怎么設(shè)置div背景圖-創(chuàng)新互聯(lián)

這篇文章主要介紹了CSS怎么設(shè)置div背景圖，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)成立于2013年，先為卓尼等服務(wù)建站，卓尼等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為卓尼企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

<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)平鋪。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS怎么設(shè)置div背景圖”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章名稱：CSS怎么設(shè)置div背景圖-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article6/cdioig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、營(yíng)銷型網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、定制開發(fā)、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(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)