CSS設置div背景圖的實現(xiàn)代碼
發(fā)布時間：2020-05-14 15:37:15 作者：Cathy 
我要評論
我要評論這篇文章主要介紹了CSS設置div背景圖的實現(xiàn)代碼，代碼簡單易懂，非常不錯，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
給組件添加背景圖控制只需要兩步：
<View
className="gifts"
style={{
background: `url(${baseUrl}starMove/exclusiveEntrance/card.png) no-repeat`,
backgroundSize: '100% 100%',
}}
>
<View classname="gift-lists"></View>
</View>
設置background和backgroundSize。
style={
width：100%；
height：100%；
}
ps：下面給大家介紹下css文件 如何使背景圖片大小適應div的大小
對背景圖片設置屬性：background-size：cover;可以實現(xiàn)背景圖片適應div的大小。
background-size有3個屬性：
- auto：當使用該屬性的時候，背景圖片將保持100% 的大小顯示，不進行任何縮放。超過div的多余部分將被隱藏。當圖片過小時，圖片會自動平鋪。這種屬性通常用來做重復性的背景或者做半透明圖片背景。
- cover：當使用該屬性時，圖片將被縮放至恰好能覆蓋div，并且圖片被隱藏的部分最少，這種屬性在大圖背景中應用比較廣泛。這點比較難理解，需要結合實踐理解。
- contain：當使用該屬性時，圖片被縮放至最大且能被完全展示出來，但是由于圖片的的尺寸比例與div的尺寸比例會有不同，所以當圖片不能蓋住div時，圖片會自動平鋪。
總結
到此這篇關于CSS設置div背景圖的實現(xiàn)代碼的文章就介紹到這了,更多相關css div 背景圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
使用CSS cross-fade()實現(xiàn)背景圖像半透明效果的示例代碼
這篇文章主要介紹了使用CSS cross-fade()實現(xiàn)背景圖像半透明效果的示例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了完美解決webpack打包css背景圖片路徑問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-01
這篇文章主要介紹了CSS3為背景圖設置遮罩并解決遮罩樣式繼承問題,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小2020-06-22
這篇文章主要介紹了CSS背景圖片設置的6個有趣的技巧,本文通過截圖實例代碼相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-12
CSS3 實現(xiàn)響應鼠標移動背景圖片漂移效果的用戶介紹卡片源碼
這是一款基于CSS3 實現(xiàn)響應鼠標移動背景圖片漂移效果的用戶介紹卡片源碼。畫面背景默認顯示一副男孩的信息介紹卡片，卡片帶有圖文介紹、圖標鏈接，以及背景懸浮陰影效果。2020-05-06
這篇文章主要介紹了使用css寫帶紋理漸變背景圖，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-20
