給一個塊元素添加多張背景圖片
最近做的項目需要用到多張底圖(背景圖)
最開始做的時候能想到的辦法只有嵌套多層div然后設置背景圖并定位以實現
今天重寫這塊代碼發現明明可以很簡單的解決!!!
話不多說,上代碼
<div class="menu"> <!-- 任意內容 --> </div>
先定義元素類名,再在css中設置背景圖
.menu { background-repeat: no-repeat; background-size: contain, contain; /* 或者使用 contain 來確保背景圖片完全顯示,可以分別為每個背景圖片設置大小 */ background-image: url(../assets/images/img1.png),url(../assets/images/img2.png); /* 設置兩個背景圖片 */ background-size: 120px 120px, 120px 120px; /* 可以分別為每個背景圖片大小 */ background-position: top left, bottom right; /* 可以分別為每個背景圖片設置位置 */
}
到此,就okk了
效果展示

【記錄下來給自己以后使用(^-^)】

浙公網安備 33010602011771號