給一個塊元素新增多張背景圖片

Wmt0927發表於2024-08-30

最近做的專案需要用到多張底圖（背景圖）

最開始做的時候能想到的辦法只有巢狀多層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了

效果展示

【記錄下來給自己以後使用（^-^）】

相關文章