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

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

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

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

<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的大小

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

background-size有3個屬性：

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

總結(jié)

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